點擊只返回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，this一個jQuery的事件處理程序內部貼有處理器的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

嘗試

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

Answer 5

您可以使用這樣的（一個更快的方式）：

$('.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 6

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