Question

这是我的HTML代码：

<html>
<head> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <body>
     <div class="product details product-item-details">
     <div class="swatch-option text" >Large</div>
       <div class="price-box price-final_price">
           <span class="price-container price-final_price tax weee">        
            <span class="price-label" style="display: 
           inline;">From</span>100</span>

          </div> 
     </div>

   <div class="product details product-item-details">
     <div class="swatch-option text" >Large</div>
     <div class="price-box price-final_price">
          <span class="price-container price-final_price tax weee">     
            <span class="price-label" style="display: inline;">From</span>200</span>

        </div> 
    </div>

    <div class="product details product-item-details">
     <div class="swatch-option text" >Large</div>
     <div class="price-box price-final_price">
          <span class="price-container price-final_price tax weee">     
            <span class="price-label" style="display: inline;">From</span>300</span>

          </div> 
  </div>
 <script>
  $(document).ready(function($){
     $('.product-item-details .swatch-option').live("click",function(){ 
        $(this).next('.price-final_price .price-container .price-label').hide();

    });
  });
  <script>

 </body>
</head>  
</html>

当单击特定的div时，我需要隐藏范围元素“ price-label”的“ From”标签。

上面的jQuery代码对我不起作用，

任何帮助将不胜感激。谢谢

Answer 1

首先，不要使用.live，而是使用.on，因为As of jQuery 1.7, the .live() method is deprecated.

然后使用$(this).next('.price-final_price').find(".price-container .price-label").hide();

$(document).ready(function() {
  $('.product-item-details .swatch-option').on("click", function() {
    $(this).next('.price-final_price').find(".price-container .price-label").hide();
  });
});

演示

$(document).ready(function() {
  $('.product-item-details .swatch-option').on("click", function() {
    $(this).next('.price-final_price').find(".price-container .price-label").hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="product details product-item-details">
  <div class="swatch-option text">Large</div>
  <div class="price-box price-final_price">
    <span class="price-container price-final_price tax weee">        
            <span class="price-label" style="display: 
           inline;">From</span>100</span>

  </div>
</div>

<div class="product details product-item-details">
  <div class="swatch-option text">Large</div>
  <div class="price-box price-final_price">
    <span class="price-container price-final_price tax weee">     
            <span class="price-label" style="display: inline;">From</span>200</span>

  </div>
</div>

<div class="product details product-item-details">
  <div class="swatch-option text">Large</div>
  <div class="price-box price-final_price">
    <span class="price-container price-final_price tax weee">     
            <span class="price-label" style="display: inline;">From</span>300</span>

  </div>
</div>

Answer 2

首先，从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。

此外，您的“ .next”仅接受下一个兄弟姐妹，但您需要采取的是， “ .price-final_price”的“ .price-container .price-label” 所以正确的方法是：

$(document).ready(function() {
    $('.swatch-option').on("click", function() {
        $(this).next('.price-final_price').find(".price-container .price-label").hide();
  });
});

还有一些建议：

您正在使用jquery / 3.2.1 /

我建议使用3.4.1“ https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js

您已将所有内容都包含在“ head”标签中。我建议仅使用脚本来限制它，例如：

<head> 
  <script deffer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" type="text/javascript"></script>
  <script deffer src="yourjQueryFile.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="yourCssFile.css">
</head>  
<body>
  {Your code here}
</body>

您可以在这里阅读有关内容：https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML

分离JS HTML和CSS文件，然后将它们包含到标记中，如上所示。模块化方式始终更好，更清洁。

JSFiddle DEMO

Answer 3

请尝试以下代码：

<!DOCTYPE html>
<html>
<head> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
      $(document).ready(function(){
         $('.product-item-details .swatch-option').click(function(){ 
            
           $(this).next().find('.price-label').hide();
         });
      });
   </script>
  </head>
 <body>
   <div class="product details product-item-details">
      <div class="swatch-option text" >Large</div>
      <div class="price-box price-final_price">
         <span class="price-container price-final_price tax weee">        
         <span class="price-label" style="display: inline;">From</span>100</span>
      </div>
   </div>

   <div class="product details product-item-details">
     <div class="swatch-option text" >Large</div>
     <div class="price-box price-final_price">
         <span class="price-container price-final_price tax weee">     
         <span class="price-label" style="display: inline;">From</span>200</span>
      </div> 
   </div>

   <div class="product details product-item-details">
      <div class="swatch-option text" >Large</div>
      <div class="price-box price-final_price">
         <span class="price-container price-final_price tax weee">     
         <span class="price-label" style="display: inline;">From</span>300</span>
      </div> 
   </div>
   
   
 </body>
</head>  
</html>

单击父div时隐藏外部元素

3 个答案: