Question

如果我想点击“ .img”类，则 div class =“隐藏窗格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();
            }
            });
        }

    );

});

Answer 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');
});

没有真正做任何事情，因为没有ID包含在包含类img的任何元素中。换句话说，你可以将这一段代码一起划过。此外，对一些基础知识的快速规则，$(document).ready(function(){之前的任何内容都被视为“全局”，并且像.each语句这样的函数不会以这种方式运行。它将在一个jsfiddle中工作，但那是因为小提琴在doc ready函数中包装你js。

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

其次，当你需要更多细节时，我会注意到很多课程的使用。不是问题，我可以在不使用ID的情况下向您展示一些优秀的jQuery。你必须理解，使用jQuery选择器，它们就像CSS一样。在元素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调用正在抓取具有类{{的所有 1}}。根据你的评论，这是不受欢迎的。

因此，重写如下：

首先重写，不确定为什么你在点击时调整中心列的宽度，当它从未调整回来时，因此它可以从开始就调整。并使用单击来简单地切换删除按钮，如下所示：

wrapper

可以写
OR

//  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();
});

但是，如果你想在隐藏列之后做某事，可以使用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();
});

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

jQuery参考：

Jquery单击元素而不影响其他元素

1 个答案: