Question

从数据源创建可变数量的div。在每个div中都有一个用作按钮的图像，另一个包含文本等的div。虽然实际用例有点复杂，但我们可以在这里使用simplfied版本：

<div id="main">
    <div id="content_block_1" class="content_block">
        <img id="content_block_button_1" class="content_block_button" src="images/1.png">
        <div id="content_block_textfield_1" class="content_block_textfield>
            This is text.
        </div>
    </div>
    <div id="content_block_2" class="content_block">
        <img id="content_block_button_2" class="content_block_button" src="images/2.png">
        <div id="content_block_textfield_2" class="content_block_textfield>
            This is more text.
        </div>
    </div>
    <div id="content_block_3" class="content_block">
        <img id="content_block_button_3" class="content_block_button" src="images/3.png">
        <div id="content_block_textfield_3" class="content_block_textfield>
            This is even more text.
        </div>
    </div>
</div>

通过单击图像，用户应能够将相关文本字段的背景颜色变为黄色。如果文本字段已经是黄色，则应使背景恢复正常。如果在突出显示任何其他文本字段时打开一个文本字段的黄色突出显示，则应删除这些突出显示并仅激活新突出显示。

我知道添加/删除.highlight css类的toggle（）函数。这是一个非常不灵活和不灵活的功能，我想出来处理这个问题：

//1st
$('#content_block_button_1').click(function () {
    //toggle the corresponding 
    $('#content_block_textfield_1').toggleClass('highlight');
    //reset all other highlights
    $('#content_block_textfield_2, #content_block_textfield_3').removeClass('highlight');
    console.log("toggled highlight 1");
});

//2nd
$('#content_block_button_2').click(function () {
    //toggle the corresponding 
    $('#content_block_textfield_2').toggleClass('highlight');
    //reset all other highlights
    $('#content_block_textfield_1, #content_block_textfield_3').removeClass('highlight');
    console.log("toggled highlight 2");
});

//3rd
$('#content_block_button_3').click(function () {
    //toggle the corresponding 
    $('#content_block_textfield_3').toggleClass('highlight');
    //reset all other highlights
    $('#content_block_textfield_1, #content_block_textfield_2').removeClass('highlight');
    console.log("toggled highlight 3");
});

我认为我们都同意这不是非常优雅，有效的代码。它根本不能很好地扩展。

我想利用按钮和文本字段元素嵌套在同一“父”中的事实。而且我想找到一种方法来执行“从所有文本字段元素中移除.highlight除了那个”兄弟“调用函数的按钮元素。我希望不依赖于id，函数然后会使用3,10或100个content_block divs ...

有人能指出我正确的方向吗？

Answer 1

您可以使用带有外卡的属性选择器

来缩短它

$('[id^=content_block_button_').click(function () {
     $('[id^=content_block_textfield]').removeClass('highlight');
     id = "content_block_textfield_" + this.id.replace('content_block_button_', '');    
     $('#' + id).toggleClass('highlight');
     console.log(id);
});

jquery选择除调用函数之外的所有类的元素

1 个答案: