jQuery - 將類的發生次數設置爲其各自的數據點擊

我想要實現的是將所有類的出現設置爲其指定的數據 - 除了點擊的特定事件，其將被設置爲獨特的事物。我的代碼在「y」變量上給出了一個未定義的錯誤。我將如何去處理數據集的情景化？jQuery - 將類的發生次數設置爲其各自的數據點擊

<div id="menu"> 
     <ul> 
      <li id="menu-tos" data-info="TERMS OF SERVICE">TERMS OF SERVICE</li> 
      <li id="menu-contact" data-info="CONTACT">CONTACT</li> 
      <li id="menu-signup" data-info="SIGN UP">SIGN UP</li> 
      <li id="menu-login" data-info="LOG IN">LOGIN</li> 
     </ul> 
    </div> 

    <script> 
     $('#menu ul li').click(function() { 
     i = $(this.id); 
     y = dataset.info; 
     $('#menu ul li').not(i).html(y); 
     $(i).html('Something unique'); 
     }); 
    </script>

來源

2016-07-29 yoimpetr

（跳過的解釋，看到一個工作版本，滾動至底部）

你不確定錯誤是因爲你試圖訪問dataset就好像它是一個變量，當它實際上是一個道具DOM元素對象的細節（細節here）。

而且，如果我正確理解你所期望的功能，也有你會碰到與你的代碼一對夫婦的其他問題：

i = $(this.id);這將解析爲$('menu-tos')。要通過ID選擇，您需要#，如下所示：$('#menu-tos')。但是，對於您的情況，實際上沒有理由將當前元素設置爲變量，因爲它已通過$(this)提供。
如上所述，y = dataset.info;將不起作用，因爲dataset是HTML元素對象的屬性，而不是變量。由於您使用的是jQuery，因此使用$(this).data('info')會更容易。
$('#menu ul li').not(i).html(y);這不會做你說你想要做的。這會將所有其他<li>元素的HTML設置爲您剛剛單擊的元素的值。要設置每一個到自己的價值，你會使用.each()
$(i).html('Something unique');假設i正確設置爲jQuery對象需要遍歷它們，你不需要這裏jQuery的包裝，你可以只使用i.html('Something unique');

一對夫婦的其他東西，這將有助於你的代碼：

現在你設置你的變量（不使用var）的方式，將它們設置在全球範圍內。這可能會起作用，但它可能會導致衝突，並且通常可以避免。使用var（如var i = $(this);），它只會在您的click()函數的範圍內保留該變量。
使用jQuery時，您應該將代碼包裝在$(document).ready()回調中。這將確保在jQuery嘗試綁定任何事件處理程序（如您的點擊處理程序）之前加載DOM。

固定在這裏提到的問題之後，JavaScript代碼最終看起來像：

$(document).ready(function() { // ensure document is loaded before running code 
    $('#menu ul li').click(function() { 

     // set all other elements to their own data-info attribute value 
     $('#menu ul li').not(this).each(function() { 
      var info = $(this).data('info'); 
      $(this).html(info); 
     }); 

     // set the clicked item to 'Something unique' 
     $(this).html('Something unique');   
    }); 
});

結帳上this JSFiddle的工作代碼。

來源

2016-07-30 00:28:04 rmhunter

更好的辦法是使用'兄弟姐妹'（如@jakob的答案），但我選擇保留使用'.not（）'的方式。「 – rmhunter

謝謝。這不僅回答了我的問題，而且還提供了一些一般性見解，以便在未來實現我的編碼效果。爲了簡潔起見，我省略了其餘的jQuery，包括$（document）.ready，但是您的徹底性是值得讚賞的。 – yoimpetr

很高興幫助！如果它適合你，你介意接受答案嗎？ – rmhunter

嘗試這樣的：

$('#menu ul li').click(function() { 
    $(this).siblings().each(function() { 
    var info = $(this).data('info'); 
    $(this).html(info); 
    }); 
    $(this).html('Something unique'); 
});

全部這裏例如https://jsfiddle.net/_jakob/q49kq3c5/1/

來源

2016-07-30 00:14:14 jakob

jQuery - 將類的發生次數設置爲其各自的數據點擊

回答

相關問題