javascript - 单击仅返回 jQuery 中的第一个项目值

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();