1

「 .img」クラスをクリックしたい場合は、 div class = "hideに関するペイン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');
});

クラスを含む要素のいずれにもIDが割り当てられていないため、実際には何もしませんimg。言い換えれば、この前のコードをまとめてスクラッチすることができます。また、いくつかの基本についての簡単なルールです。以前のものはすべて$(document).ready(function(){「グローバル」と見なされ、.eachステートメントのように機能します。このように頭の中で実行されることはありません。これはjsfiddleで機能しますが、それはfiddleがドキュメント対応関数でjsをラップするためです。

また、新しいjQueryでは、もちろん短くて覚えやすいものに置き換えることができ$(document).ready(function(){ /* do work */ })ます$(function(){ /* do work */ })。

第二に、より詳細な情報が必要な場合、クラスの使用が多いことに気付きます。問題ありません。IDを使用せずに、このための優れたjQueryをいくつか紹介できます。ただし、jQueryセレクターでは、CSSと同じように理解する必要があります。要素IDの前にa#を使用して、その正確な最初の一致要素を取得します。

例えば：

// 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内部の呼び出しはクラスを持つすべて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 に答える