0

私の問題： http ：//www.danieldoktor.dk/test2/test2.html

いずれかの設定ボタンを押すと、両方のボックスがトリガーされます。

ボタンとスライドダウンアップボックスを同様のコードで制御する全体的なコードが欲しいのですが、両方を制御するのではなく、各ボックスを個別に制御します。

$(".someBtnClass").click(function () { 
        if(!$(".someBoxClass").hasClass('header-down')){
            $(".someBoxClass").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
        }
        else{
            $(".someBoxClass").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
        }

    }); 


    $(document).click(function() {
        if($(".someBoxClass").hasClass('header-down')){
            $(".someBoxClass").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
    }
    });

    $(".someBoxClass").click(function(e) {
        e.stopPropagation(); // This is the preferred method.
               // This should not be used unless you do not want
                             // any click events registering inside the div
    });

これはクラスで行うことができますか？

そうでない場合は、どのように作成できるので、後でボックスをphpでロードできますか？

編集

私のマークアップ：HTML

<div class="lists">
        <header class="box_header" id="box1">
            <h1>HEADER 1</h1>
            <div class="setting" id="btn1"></div>
            </header>
 </div>

 <div class="lists">
        <header class="box_header" id="box2">
            <h1>HEADER 2</h1>
            <div class="setting" id="btn2"></div>
            </header>
 </div>

jQuery

$(".setting").each(function(){
    $(this).on("click", function(){if(!$(".box_header").hasClass('header-down')){
        $(".box_header").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
    }
    else{
        $(".box_header").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
    }});
});


$(document).click(function() {
    if($(".box_header").hasClass('header-down')){
        $(".box_header").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});

$(".box_header").click(function(e) {
    e.stopPropagation(); // This is the preferred method.
           // This should not be used unless you do not want
                         // any click events registering inside the div
});
4

6 に答える 6

1

あなたはセレクターが両方をつかんでいます。「box-header」クラスを取得してアニメーション化するのではなく、親のみを取得してアニメーション化するように指示する必要があります。

Javascript：

$('.setting').on('click', function() {
    var parent = $(this).parent();
    if (!parent.hasClass('header-down')) {
        parent.stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
    } else {
        parent.stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
    }
});

JSFiddle： http: //jsfiddle.net/jeffshaver/kHV8V/1/

于 2013-02-26T12:17:45.447 に答える
0

マークアップは次のようになります（質問にこれを追加する必要があります）

<header id="box1" class="box_header">
   <h1>HEADER 1</h1>
   <div id="btn1" class="setting"></div>
</header>

ボックスごとに。それで、あなたがクリックした場合、正しい設定ボタンの（親）.settingだけをアニメートしたいのだと思いますか？.box_header

$(".setting").on("click", function(){
   if(!$(this).parent().hasClass('header-down')){
      $(this).parent().stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down');
   } else{
      $(this).parent().stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
   }
});

}）;

于 2013-02-26T12:12:51.580 に答える
0

jQueryコードの変更バージョン

// widget 1

 $("#btn1").each(function(){
    $(this).on("click", function(){if(!$(".box_header").hasClass('header-down')){
        $("#box1").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
    }
    else{
        $(".box_header").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
    }});
});


 $("#btn2").each(function(){
    $(this).on("click", function(){if(!$(".box_header").hasClass('header-down')){
        $("#box2").stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down'); 
    }
    else{
        $(".box_header").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
    }});
});

$(document).click(function() {
    if($(".box_header").hasClass('header-down')){
        $(".box_header").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});

$(".box_header").click(function(e) {
    e.stopPropagation(); // This is the preferred method.
           // This should not be used unless you do not want
                         // any click events registering inside the div
});

デモ

于 2013-02-26T12:14:07.127 に答える
0

マークアップを知らなくても、次のようなことを試すことができます。

var box = $(this).parents("div.parent_class").find('.someBoxClass');

次に、$（'。someBoxClass'）をボックスに置き換えます

于 2013-02-26T12:09:11.200 に答える
0

クリックイベントは、一致するすべての要素に適用されるため、cssクラスではなく、設定ボタンの「ID」で登録する必要があります。その特定の要素を渡す関数を作成し、$（ "。someBoxClass"）を$（element）に置き換えます。例えば、

$('#btn1').click(function(){animate(this)});

function animate(element){
$(element).stop().....
}
于 2013-02-26T12:18:28.787 に答える
0

クラスの代わりにIDを使用する必要があります。

$("#box1").click(function () { 

$("#box2").click(function () {

私はこれがあなたが望むものだと思います：http：//jsfiddle.net/MTcvu/

于 2013-02-26T12:21:52.623 に答える