Jquery从一组div中获取单击div的值

Question

我需要从一组div中的一个点击的div中获取输入值。

 while ($row = $result->fetch_assoc()) {  
          echo'<div class="col-md-3 ">
                <div class="hvr-bob divs">
                  <a href="#" class="box bg-primary" style="text-decoration:none;" data-toggle="tooltip" title="'.$nozerosinmydate.'">
                    <div class="box-cell p-a-3 valign-middle">
                      <i class="box-bg-icon middle right fa fa-print"></i>
                      <span class="orderinfo">
                      <span class="font-size-16" ellipsis><strong>'.$nextgenorder_companyname_shorten.'</strong></span><br>
                      <span class="font-size-14 ">'.$nextgenorder_ordernumber.'</span>
                      <input type="hidden" class="gogo" id="searchbyordernumber" name="searchbyordernumber" value="'.$nextgenorder_ordernumber.'">

                     </span>
                    
                    </div>
                  </a>
                </div>
              </div>
              ';                              
}

现在脚本

 <script type="text/javascript">
                          
 $( ".divs" ).on( 'click' , function() {
   $(".gogo").each(function(){
       searchString=$(this).val();
       alert(searchString);
    });
 });
 </script>

这将返回第一个div的值，无论我单击哪个div。

Answer 1

在DOM中ID应该是唯一的，因此在每个输入上使用id=“searchbyorderNumber”不是有效的HTML。话虽如此，在click侦听器内部，您应该能够使用.find（）获得click div中的子输入，而不是迭代所有输入。

null

$( ".divs" ).on( 'click' , function() {
  let input = $(this).find('.gogo');
  alert(input.val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3 ">
    <div class="hvr-bob divs">
      <a href="#" class="box bg-primary" style="text-decoration:none;" data-toggle="tooltip">
        <div class="box-cell p-a-3 valign-middle">
          <i class="box-bg-icon middle right fa fa-print"></i>
          <span class="orderinfo">
          <span class="font-size-16" ellipsis><strong>test1</strong></span><br>
          <span class="font-size-14 ">1</span>
          <input type="hidden" class="gogo" id="searchbyordernumber" name="searchbyordernumber" value="1">

         </span>
        
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-3 ">
    <div class="hvr-bob divs">
      <a href="#" class="box bg-primary" style="text-decoration:none;" data-toggle="tooltip">
        <div class="box-cell p-a-3 valign-middle">
          <i class="box-bg-icon middle right fa fa-print"></i>
          <span class="orderinfo">
          <span class="font-size-16" ellipsis><strong>test2</strong></span><br>
          <span class="font-size-14 ">2</span>
          <input type="hidden" class="gogo" id="searchbyordernumber" name="searchbyordernumber" value="2">

         </span>
        
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-3 ">
    <div class="hvr-bob divs">
      <a href="#" class="box bg-primary" style="text-decoration:none;" data-toggle="tooltip">
        <div class="box-cell p-a-3 valign-middle">
          <i class="box-bg-icon middle right fa fa-print"></i>
          <span class="orderinfo">
          <span class="font-size-16" ellipsis><strong>test3</strong></span><br>
          <span class="font-size-14 ">3</span>
          <input type="hidden" class="gogo" id="searchbyordernumber" name="searchbyordernumber" value="3">

         </span>
        
        </div>
      </a>
    </div>
  </div>