Question

我有许多具有相同类名的产品，我希望用户点击该项只返回所点击的项目值，但我的代码只返回第一个产品的值。当用户点击时我想要的更多东西图像记录存储在购物车中，但在我的情况下，当用户点击图像时返回选定的产品值，再次当用户点击另一个图像时，前一个值被替换为这个我不想替换它我想添加到其他李如何做到。这是我的代码：

<div class="left">

     <div class="left-top">
        <ul class="add">
          <li>bellle belle belle 25cl
             <p>2 Unit(s) at PKR 0.8/Unit(s)</p>
          </li>
          <li>
          PKR 1.6
          </li>
          <li>
          processor amd 8-core
          </li>
          <li>
           PKR 1980.0
          </li>
          <li> processor amd 8-core
             <p></p>
          </li>
          <li>
           PKR 1980.0
          </li>

          <li>Total:PKR 1993.0
             <p>Taxes:PKR 0.0</p>
          </li>
        </ul>
     </div>

     <div class="right-bottom">
         <div class="box2">
             <p>pkr 800.0</p>
           <img src="images/col.png" />
           <h1>Beverges</h1>
         </div>
         <div class="box2">
          <p>pkr 700.0</p>
           <img src="images/col.png" />
           <h1>Beverges</h1>
         </div>
         <div class="box2">
          <p>pkr 700.0</p>
           <img src="images/col.png" />
           <h1>Beverges</h1>
         </div>
         <div class="box2">
          <p>pkr 700.0</p>
           <img src="images/col.png" />
           <h1>Beverges</h1>
         </div>
         <div class="box2">
          <p>pkr 700.0</p>
           <img src="images/col.png" />
           <h1>Beverges</h1>
         </div>
         <div class="box2">
          <p>pkr 700.0</p>
           <img src="images/col.png" />
           <h1>Beverges</h1>
         </div>
         <div class="box2">
          <p>pkr 700.0</p>
           <img src="images/col.png" />
           <h1>Beverges</h1>
         </div>
         <div class="box2">
          <p>pkr 700.0</p>
           <img src="images/col.png" />
           <h1>Beverges</h1>
         </div>
         <div class="box2">
          <p>pkr 700.0</p>
           <img src="images/col.png" />
           <h1>Beverges</h1>
         </div>
         <div class="box2">
          <p>pkr 700.0</p>
           <img src="images/col.png" />
           <h1>Beverges</h1>
         </div>
         <div class="box2">
          <p>pkr 700.0</p>
           <img src="images/col.png" />
           <h1>Beverges</h1>
         </div>
         <div class="box2">
          <p>pkr 700.0</p>
           <img src="images/col.png" />
           <h1>Beverges</h1>
         </div>
         <div class="box2">
          <p>pkr 700.0</p>
           <img src="images/col.png" />
           <h1>Beverges</h1>
         </div>
         <div class="box2">
          <p>pkr 700.0</p>
           <img src="images/col.png" />
           <h1>Beverges</h1>
         </div>
         <div class="box2">
          <p>pkr 800.0</p>
           <img src="images/col.png" />
           <h1>Beverg</h1>
         </div>
      </div>

   </div>
</div>
The script i have written for it is here.

    <script type="text/javascript">
    $(document).ready(function() {
      $('.box2').click(function(){
          var price=$(".box2 p").html();
          var product=$(".box2 h1").html();
          $(".add li:first-child").text(product);
          $(".add li:nth-child(2)").text(price);
      });
    });
    </script>

Answer 1

您需要使用this，JQuery事件处理程序中的this是附加了处理程序的DOM元素。

使用

  var price=$(this).find("p").html();
  var product=$(this).find("h1").html();

而不是

  var price=$(".box2 p").html();
  var product=$(".box2 h1").html();

Answer 2

使用

$(this).find('p') //or  $(this).find('h1')

而不是

$(".box2 p").html()

Answer 3

$(document).ready(function() {
  $('.box2').click(function(){
      var price=$( this).find('p').html();
      var product=$( this).find('h1').html();
      $(".add li:first-child").text(product+ price);

  });
});

你的jquery应该是

Demo

Answer 4

您可以这样使用（更快捷的方式）：

$('.box2').click(function(){
      var price=$(".box2 p", this).html();
      var product=$(".box2 h1", this).html();
      $(".add li:first-child", this).text(product);
      $(".add li:nth-child(2)", this).text(price);
  });

Answer 5

<script type="text/javascript">
$(document).ready(function() {
  $('.box2').click(function(){
      var price=$(this).find("p").html();
      var product=$(this).find("h1").html();
  });
});
</script>

Answer 6

尝试

  var price=$( this).find('p').html();

click仅返回jQuery中的第一个项值

6 个答案: