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

Question

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

Answer 1

隐藏输入与单击的元素同级，您可以使用 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>