更新文本使其在更新之前的DIV的已經點擊 - jQuery的

Question

我一直在試圖解決這個問題的最後幾個小時，但所有的嘗試都失敗了......

我需要做什麼是點擊一個會導致另一個DIV彈出的DIV。 彈出裏面有一些<li>，點擊後，屬性名稱被「轉移」到點擊的第一個DIV。

好吧，我設法做到了這一點，但在我更新第一個DIV後，當我嘗試更新第二個DIV時，第一個DIV也得到更新，當我嘗試更新第三個DIV時，另外兩個更新了屁股。

任何人都可以幫助我解決它，只更新它被點擊離開之前的DIV，因爲它應該是？

下面是代碼：

HTML

<div class="num-1"> 
    <img src="http://dummyimage.com/180x180/eeeeee/000000.jpg" width="180" height="180"> 
    <p class="brand"></p> 
    <p class="name"></p> 
</div> 

<div class="num-2"> 
    <img src="http://dummyimage.com/180x180/eeeeee/000000.jpg" width="180" height="180"> 
    <p class="brand"></p> 
    <p class="name"></p> 
</div> 

<div class="num-3"> 
    <img src="http://dummyimage.com/180x180/eeeeee/000000.jpg" width="180" height="180"> 
    <p class="brand"></p> 
    <p class="name"></p> 
</div> 

<div class="num-4"> 
    <img src="http://dummyimage.com/180x180/eeeeee/000000.jpg" width="180" height="180"> 
    <p class="brand"></p> 
    <p class="name"></p> 
</div> 

<div class="num-5"> 
    <img src="http://dummyimage.com/180x180/eeeeee/000000.jpg" width="180" height="180"> 
    <p class="brand"></p> 
    <p class="name"></p> 
</div> 

<div class="popup"> 
    <ul> 
    <li name="{{PHP GENERATED $name}}">{{PHP GENERATED $name}}</li> 
    <li name="{{PHP GENERATED $name}}">{{PHP GENERATED $name}}</li> 
    <li name="{{PHP GENERATED $name}}">{{PHP GENERATED $name}}</li> 
    </ul> 
</div> 

jQuery的

如果我得到了DIV的數量

//Openning the .popup and assigning the names 
//First check the number of the div it was clicked on 
$('img').on('click', function() { 
    var num = $(this).parent().attr('class').match(/\d+/)[0]; 
    $('.popup').fadeIn(); 

    //Click li to update the brand and name on the page 
    $('.popup li').on('click', function() { 

    //Check the name and split it 
    var nameComplete = $(this).attr('name'); 
    var Array = nameComplete.split(" "); 

    //Check the first word and identify it as brand, also update on the page 
    var brand = Array[0]; 
    $('.num-' + num + ' .brand').text(brand); 

    //Check the rest of the array for the name and update it on the page 
    var name = ''; 
    for(var i=1; i<Array.length ;i++) { 
     name = name + Array[i] + ' '; 
    } 
    name = $.trim(name); 

    $('.num-' + num + ' .name').text(name); 

    $('.popup').fadeOut(); 

    }); 
}); 

有人可能會問， correctl年。 我做console.log(num);它表明我在正確的DIV點擊因爲DIV類是num-X（X = 1〜5），1對1，2 2，...

的<li>的名稱沒問題，它應該像它應該的那樣工作，將其拆分並獲得「轉移」的正確部分。

我想我做了適當的修改以更好地理解代碼。

Answer 1

$('img').on('click', function() { 
     var num = $(this).parent().attr('class').match(/\d+/)[0]; 
     window.num = num; 
     $('.popup').fadeIn(); 
    }); 

    //Click li to update the brand and name on the page 
    $('.popup li').on('click', function() { 

     //Check the name and split it 
     var nameComplete = $(this).attr('name'); 
     var Array = nameComplete.split(" "); 

     //Check the first word and identify it as brand, also update on the page 
     var brand = Array[0]; 
     $('.num-' + window.num + ' .brand').text(brand); 

     //Check the rest of the array for the name and update it on the page 
     var name = ''; 
     for(var i=1; i<Array.length ;i++) { 
     name = name + Array[i] + ' '; 
     } 
     name = $.trim(name); 

     $('.num-' + num + ' .name').text(name); 

     $('.popup').fadeOut(); 
    }); 

在單獨的函數中分離兩個點擊事件。在你的代碼中可能發生的事情是，每當你點擊一個div時，一個新的點擊事件處理程序被附加到'.popup li'，並且每當你點擊其中一個'.popup li'時，所有的點擊處理程序都被激活。因此解釋了更新的多個div。

你的第二個選擇是使用jquery.off。通過這種方式，每次將附加的.click事件句柄附加到'.popup li'時，您也可以在工作完成並完成後將其刪除。由於這會讓你的代碼更難調試和閱讀，我更喜歡這個答案中的第一個方法。

注意** - 我已經改變了NUM到window.num這心不是一個很好的做法（保持一個全局變量），但是我相信，你將能夠一旦你重構代碼它的工作