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

Question

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

Answer 1

您的 jQuery 代码应替换为 class 选择器。

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

Answer 2

隐藏输入是点击元素的同级元素，您可以使用 siblings() or 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>

Answer 3

试试这个：

Fiddle: 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);
});

Answer 4

因为 jQuery 使用 CSS select 或者你可以在技术上做类似

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

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

其他更好的选择是让它们具有相同的 class（出于样式目的）并为它们中的每一个赋予不同的 ID，您只需要写成 "product1"，"product2"...使用您已有的循环

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

Get different hidden value containing same class via jquery

html

javascript

jquery

hidden-field