Question

我有一个页面，其中有多个div用于隐藏/显示。最初在页面加载时，div将被隐藏，但是当单击“Read More”按钮时，将显示该隐藏的div。现在这些div具有相似的ID。我想知道是否有（更短的）方法来编写代码，而不是指定每个ID。我可以使用*选择器应用于所有类似于（'＃* - box'）格式的ID吗？

的jQuery

$(document).ready( function () {

function hidesections() {
    $('#bob-box .summary').hide('medium');
    $('#tom-box .summary').hide('medium');
    $('#bill-box .summary').hide('medium');
    $('#mike-box .summary').hide('medium');
};

function reset() {
    $('#bob-read').html('<img src="images/more-arrow.png"> Read More <img src="images/more-arrow.png">');
    $('#tom-read').html('<img src="images/more-arrow.png"> Read More <img src="images/more-arrow.png">');
    $('#bill-read').html('<img src="images/more-arrow.png"> Read More <img src="images/more-arrow.png">');
    $('#mike-read').html('<img src="images/more-arrow.png"> Read More <img src="images/more-arrow.png">');
};



$('#bob-read').toggle(
    function () {
        hidesections();
        $('#bob-box .summary').show('medium');
         reset();
        $('#bob-read').html('<img src="images/less-arrow.png"> Read Less <img src="images/less-arrow.png">');
    }, function () {
        if ( $('#bob-box .summary').css('display') == 'block')
        {
            hidesections();
            reset();
        }
        else {
            hidesections();
            reset();
            $('#bob-box .summary').show('medium');
            $('#bob-read').html('<img src="images/less-arrow.png"> Read Less <img src="images/less-arrow.png">');
        }
});


$('#tom-read').toggle(
    function () {
        hidesections();
        $('#tom-box .summary').show('medium');
         reset();
        $('#tom-read').html('<img src="images/less-arrow.png"> Read Less <img src="images/less-arrow.png">');
    }, function () {
        if ( $('#tom-box .summary').css('display') == 'block')
        {
            hidesections();
            reset();
        }
        else {
            hidesections();
            reset();
            $('#tom-box .summary').show('medium');
            $('#tom-read').html('<img src="images/less-arrow.png"> Read Less <img src="images/less-arrow.png">');
        }
});

$('#bill-read').toggle(
    function () {
        hidesections();
        $('#bill-box .summary').show('medium');
         reset();
        $('#bill-read').html('<img src="images/less-arrow.png"> Read Less <img src="images/less-arrow.png">');
    }, function () {
        if ( $('#bill-box .summary').css('display') == 'block')
        {
            hidesections();
            reset();
        }
        else {
            hidesections();
            reset();
            $('#bill-box .summary').show('medium');
            $('#bill-read').html('<img src="images/less-arrow.png"> Read Less <img src="images/less-arrow.png">');
        }
});



$('#mike-read').toggle(
    function () {
        hidesections();
        $('#mike-box .summary').show('medium');
         reset();
        $('#mike-read').html('<img src="images/less-arrow.png"> Read Less <img src="images/less-arrow.png">');
    }, function () {
        if ( $('#mike-box .summary').css('display') == 'block')
        {
            hidesections();
            reset();
        }
        else {
            hidesections();
            reset();
            $('#mike-box .summary').show('medium');
            $('#mike-read').html('<img src="images/less-arrow.png"> Read Less <img src="images/less-arrow.png">');
        }
    });

})

<section id="bob-box" style="margin-bottom:40px;">
    <img id="image" src="#" align="left" style="padding-right:15px;padding-bottom:10px">
    <h2>Title Here</h2>
    <article id="short">
        This party will be shown.
    </article>

    <div class="summary">
        This part will initially be hidden.
    </div>

    <a id="bob-read" class="read" href="javascript:;">
        <img src="#">
        Read More
        <img src="#">
    </a>
</section>

Answer 1

您可以在选择器中使用通配符，例如*[id*='-box']

$("*[id*='-box']").find(".summary").hide('medium');

这将匹配包含单词-box的属性id的所有元素，并且尾随部分应该清晰

Answer 2

为要显示或隐藏的所有元素使用通用的类名称。

这样，你只需要一行代码

$('.YOUR_CLASS').hide('medium');

具有相似ID的多个Div用于切换

2 个答案: