1

如果我想单击“ .img”类，那么div class="hide pane pane_right"将显示出来而不会影响其他类。这是我的代码

<ul class="admin-list">
    <li>
    <!--IOS Start-->
    <div class="wrapper">
        <div class="pane pane_left" style="display:none;">
            <a class="img ios-delete icon-minus" href="#"></a>
        </div>
        <div class="hide pane pane_right">
            <button class="ios-buttons btn btn-danger" href="#">delete</button>
        </div>
        <div class="pane pane_center">
            <div class="pane__content">
                <a href="#">[module]_setup_mysql.sql</a>
            </div>
        </div>
    </div>
    <!--IOS  End-->
    </li>
    <li>
    <!--IOS Start-->
    <div class="wrapper">
        <div class="pane pane_left" style="display:none;">
            <a class="img ios-delete icon-minus" href="#"></a>
        </div>
        <div class="hide pane pane_right">
            <button class="ios-buttons btn btn-danger" href="#">delete</button>
        </div>
        <div class="pane pane_center">
            <div class="pane__content">
                <a href="#">labels_en.po</a>
            </div>
        </div>
    </div>
    <!--IOS  End-->
    </li>
    <li>
    <!--IOS Start-->
    <div class="wrapper">
        <div class="pane pane_left" style="display:none;">
            <a class="img ios-delete icon-minus" href="#"></a>
        </div>
        <div class="hide pane pane_right">
            <button class="ios-buttons btn btn-danger" href="#">delete</button>
        </div>
        <div class="pane pane_center">
            <div class="pane__content">
                <a href="#">labels_zh-hans.po</a>
            </div>
        </div>
    </div>
    <!--IOS  End-->
    </li>
    <li>
    <!--IOS Start-->
    <div class="wrapper">
        <div class="pane pane_left" style="display:none;">
            <a class="img ios-delete icon-minus" href="#"></a>
        </div>
        <div class="hide pane pane_right">
            <button class="ios-buttons btn btn-danger" href="#">delete</button>
        </div>
        <div class="pane pane_center">
            <div class="pane__content">
                <a href="#">labels_zhhans.po</a>
            </div>
        </div>
    </div>
    <!--IOS  End-->
    </li>
</ul>

这是我的jQuery

    //create an array to store the header id's
    tableTitle = new Array();
    //iterate through each h2 header element
    $('.img').each( function(index) {
        //store each h2 id in the array
        tableTitle[index] = $(this).attr('id');
    });

$(document).ready(function(){
    //when user clicks on a header
    $(".img").click(

        function(){
                //create a loop to close all of the paragraphs after user click
                for (var i=0; i<3; i++) {
                    $('#'+tableTitle[i]).find(".pane_right").hide();

                }

        $(".wrapper").ready(function(){     
            //check the css of the paragraph associated with the clicked header
             if($(this).find(".pane_right").css('display') == 'none'){
                //if display is set to none in css, show the paragraph
                $(this).find(".pane_right").show();
                $(this).width('56%');
            }else{
                //if the display is not set to none, hide the paragraph
                $(this).find(".pane_right").hide();
            }
            });
        }

    );

});
4

1 回答 1

1

根据你的小提琴和你的评论，我有一些建议给你。首先，这个：

//create an array to store the header id's
tableTitle = new Array();
//iterate through each h2 header element
$('.img').each( function(index) {
    //store each h2 id in the array
    tableTitle[index] = $(this).attr('id');
});

没有真正做任何事情，因为没有为任何包含 class 的元素分配 ID img。换句话说，您可以将之前的这段代码一起划掉。此外，一些基础知识的快速规则，之前的任何东西都$(document).ready(function(){被认为是“全局的”，并且像您的 .each 语句这样的功能不会以这种方式在您的脑海中运行。它将在 jsfiddle 中工作，但那是因为 fiddle 将 js 包装在 doc ready 函数中。

此外，在较新的 jQuery 中，您当然可以$(document).ready(function(){ /* do work */ })用$(function(){ /* do work */ })更短且更容易记住的替代。

其次，当你需要更多细节时，我注意到很多类的使用。没问题，我可以在不使用 ID 的情况下向您展示一些很棒的 jQuery。不过，您必须了解，使用 jQuery 选择器，它们就像 CSS 一样。a#在元素 ID 前面使用以获取确切的第一个匹配元素。

例如：

// HTML
<a id="bob" href="javascript:void()">click 1</a>
<a id="bob" href="javascript:void()">click 2</a>
<a id="bob" href="javascript:void()">click 3</a>

// Some Script
console.log( $("#bob").text() ); //  will result in "click 1"
// There reason only "click 1" will display is because it is the FIRST MATCHING ID

另一方面，诸如此类的类选择器$(".img")当然会抓取包含该类的每个单个元素，无论它是从什么调用的。因此，在您的示例中，在.img").click(...（顺便说一句，您做得正确），.wrapper内部调用正在获取具有 class 的所有内容wrapper。根据您的评论，这是不希望的。

因此，重写如下：

第一次重写，不知道为什么要在单击时调整中心列的宽度，因为它从未调整回来，因此可以从一开始就进行调整。并使用单击来简单地切换删除按钮，如下所示：

//  simple breakdown
$(".pane_center").width('56%');
$(".img").click(function(e){
    //  calls for the parent wrapper so we can grab anything within
    var wrapper = $(this).parents(".wrapper").first();
    //  grab the child that needs hidden
    wrapper.find(".pane_right").toggle();
});

或者可以写成

$(".pane_center").width('56%');
$(".img").click(function(e){
    //  This only works with the html sequence as you have it
    //  simply grabs the img parent and then its sibling that needs hidden
    $(this).parent().siblings(".pane_right").toggle();
});

但是，如果您想在隐藏列后执行某些操作，则可以使用切换的回调函数：

$(".img").click(function(e){
    $(this).parent().siblings(".pane_right").toggle(function(e) {
        if ($(this).is(":visible")) {
            $(this).siblings(".pane_center").width('56%');
        }
        else {
            $(this).siblings(".pane_center").width('');
        };
    });
});

在你的小提琴中尝试每一个，你会发现它们都有效，问题是你的真实意图。

jQuery 参考资料：

于 2012-10-28T22:14:15.793 回答