jquery互斥點擊

Question

我有3個div，每個（有效或無效）有2個可能的圖像標籤。如果一個div被點擊激活，則其他div必須設置爲不活動。我如何用img標籤完成此操作，以及如果用戶禁用javascript，會發生什麼？

Answer 1

你的意思是這樣的嗎？

<div class="block" id="block1"> 
    <img src='inactive_block1.jpg'> 
</div> 

<div class="block" id="block2"> 
    <img src='inactive_block2.jpg'> 
</div> 

<div class="block" id="block3"> 
    <img src='inactive_block3.jpg'> 
</div> 

使用像jQuery庫時，JavaScript將如下所示：

$(function() { 
    $('.block').click(function() { 
     $('#block1').find('img').attr('src', 'inactive_block1.jpg'); 
     $('#block2').find('img').attr('src', 'inactive_block2.jpg'); 
     $('#block3').find('img').attr('src', 'inactive_block3.jpg'); 
     $(this).find('img').attr('src', 'active_' + $(this).attr('id') + '.jpg'); 
    }); 
}); 

上述內容，如果你有inactive_block1.jpg，inactive_block2.jpg，inactive_block3.jpg和active_block1.jpg，active_block2.jpg和active_block3.jpg你應該得到你想要的。

它是否值得或不讓javascript禁用回退，主要取決於您是否期望大量的用戶禁用javascript。

Answer 2

如果用戶禁用JavaScript，則無法執行基於JavaScript的動態修改頁面的任何操作。您唯一的選擇是創建一個「棄用」版本的功能，每次點擊後需要一個頁面請求。

我會推薦研究如何從DOM中的元素動態添加/刪除類，這就是我將如何處理這個問題。您可以輕鬆地爲所有在點擊時處於「活動」狀態的元素執行jQuery選擇，併爲它們設置一個「禁用」類，這樣，除了您點擊的元素之外，其他所有元素都會變黑。

這有道理嗎？