通过jquery获取包含相同类的不同隐藏值

我通过 for 循环创建了不同的产品，因此输入hidden字段具有相同的类，但其中的值不同，所以我想要的是当我单击发送查询按钮时获得同一类的不同值。看完这个jsfiddle链接就可以理解了。提前对不起英语。

隐藏输入是单击元素的同级，您可以使用siblings()或next() 获取它（可以使用 next()，因为它是紧跟在元素之后的同级）

var pro_nm = $(this).siblings('.proname').val();

$('.send-enq a').click(function(s) {
  var pro_nm = $(this).parent().find('.proname').val();
  alert(pro_nm);
});

.col-sm-4 {
  width: 33.33333333%;
}
.single-product {
  position: relative;
  height: auto;
  margin-bottom: 30px;
  background-color: #f8f8f8;
  border: 1px solid #dddddd;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 2px #dddddd;
  transition: 0.7s all ease;
}
.single-product figure {
  position: relative;
  margin: 0;
  padding: 1px;
  width: 100%;
  height: 200px;
  border-bottom: 1px solid #dddddd;
}
.single-product figure img {
  width: 100%;
  height: 100%;
}
.read-more {
  position: absolute;
  top: 50px;
}
.send-enq {
  position: absolute;
  top: 50px;
  left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4 col-xs-6">
  <div class="single-product">
    <figure>
      <img src="/prothumb/thumb_44924_146357434748906.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
      <input type="hidden" value="/prothumb/thumb_44924_146357434748906.jpg" id="proimg">
      <figcaption>
        <div class="read-more">
          <a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
        </div>
        <div class="send-enq">
          <a href="#sendenquiry"><i class="fa fa-share" aria-hidden="true"></i> Send Enquiry</a>
          <input type="hidden" value="Wildcraft" class="proname">
        </div>
      </figcaption>
    </figure>
    <div class="col-xs-12 nopadding">
      <span class="col-xs-8">
															<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" target="_blank" title="Wildcraft">Wildcraft</a>
														</span>
      <strong class="col-xs-4"><i class="fa fa-inr"></i> 150.00</strong>
    </div>
  </div>
  <!-- end .single-product -->
</div>
<div class="col-sm-4 col-xs-6">
  <div class="single-product">
    <figure>
      <img src="/prothumb/thumb_44924_146339128943993.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
      <input type="hidden" value="/prothumb/thumb_44924_146339128943993.jpg" id="proimg">
      <figcaption>
        <div class="read-more">
          <a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTQ=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
        </div>
        <div class="send-enq">
          <a href="#sendenquiry"><i class="fa fa-share" aria-hidden="true"></i> Send Enquiry</a>
          <input type="hidden" value="iPaky Premium TPU+PC Hybird Armo" class="proname">
        </div>

或者使用 parent() 获取父元素并在其中找到元素

var pro_nm = $(this).parent().find('.proname').val();

$('.send-enq a').click(function(s) {
  var pro_nm = $(this).siblings('.proname').val();
  // or
  // var pro_nm = $(this).next().val();
  alert(pro_nm);
});

.col-sm-4 {
  width: 33.33333333%;
}
.single-product {
  position: relative;
  height: auto;
  margin-bottom: 30px;
  background-color: #f8f8f8;
  border: 1px solid #dddddd;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 2px #dddddd;
  transition: 0.7s all ease;
}
.single-product figure {
  position: relative;
  margin: 0;
  padding: 1px;
  width: 100%;
  height: 200px;
  border-bottom: 1px solid #dddddd;
}
.single-product figure img {
  width: 100%;
  height: 100%;
}
.read-more {
  position: absolute;
  top: 50px;
}
.send-enq {
  position: absolute;
  top: 50px;
  left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4 col-xs-6">
  <div class="single-product">
    <figure>
      <img src="/prothumb/thumb_44924_146357434748906.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
      <input type="hidden" value="/prothumb/thumb_44924_146357434748906.jpg" id="proimg">
      <figcaption>
        <div class="read-more">
          <a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
        </div>
        <div class="send-enq">
          <a href="#sendenquiry"><i class="fa fa-share" aria-hidden="true"></i> Send Enquiry</a>
          <input type="hidden" value="Wildcraft" class="proname">
        </div>
      </figcaption>
    </figure>
    <div class="col-xs-12 nopadding">
      <span class="col-xs-8">
															<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" target="_blank" title="Wildcraft">Wildcraft</a>
														</span>
      <strong class="col-xs-4"><i class="fa fa-inr"></i> 150.00</strong>
    </div>
  </div>
  <!-- end .single-product -->
</div>
<div class="col-sm-4 col-xs-6">
  <div class="single-product">
    <figure>
      <img src="/prothumb/thumb_44924_146339128943993.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
      <input type="hidden" value="/prothumb/thumb_44924_146339128943993.jpg" id="proimg">
      <figcaption>
        <div class="read-more">
          <a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTQ=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
        </div>
        <div class="send-enq">
          <a href="#sendenquiry"><i class="fa fa-share" aria-hidden="true"></i> Send Enquiry</a>
          <input type="hidden" value="iPaky Premium TPU+PC Hybird Armo" class="proname">
        </div>

试试这个：

小提琴：http://jsfiddle.net/kjoLyf9d/

只需将 $（'.send-enq'）替换为 $（this），并将 find（）替换为 next（），因为它引用了锚标记

$('.send-enq a').click(function(s){
    var pro_nm = $(this).next('.proname').val(); // just replace $('.send-enq') with $(this) and replace find() with next() because it refer to anchortag
    alert(pro_nm);
});

由于jQuery使用CSS选择器，因此在技术上您可以执行以下操作：

 $('#proimg:nth-of-type(2)')

为了选择第二个 #proimg 元素，但拥有多个具有相同 ID 的元素只是不好的做法。

其他更好的选择是让它们具有相同的类（出于样式目的）并给它们中的每一个一个不同的 id，你只需要写一些类似"product1"，"product2"的东西......使用你已经拥有的循环<</p>

div class="one_answers">

你的jQuery代码应该被类选择器替换。

$('.send-enq a').click(function(s){
        var pro_nm = $(this).next('.proname').val(); 
        console.log("test",pro_nm);
     });

相关内容

最新更新

热门标签：