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選擇，並在其上設置“禁用”類，這樣就實質上使除了單擊的元素之外的所有內容都變黑了。

那有意義嗎？