0

これを1つの関数に単純化したいのですが、方法がわかりません。クリックIDから変数を取得して、非表示のIDセレクターで使用できるはずです。

$(document).ready(function(){
      $(".hidden").animate({opacity:'0'});
    $("#click1").click(function(){
        $(".hidden").animate({opacity:'0'});
        $("#hidden1").animate({opacity:'0'});
        $("#hidden1").animate({opacity:'1'},"slow");    
        $("#hidden1").stop();
        });  
    $("#click2").click(function(){
        $(".hidden").animate({opacity:'0'});
        $("#hidden2").animate({opacity:'0'});
        $("#hidden2").animate({opacity:'1'},"slow");    
        $("#hidden2").stop();
        });  
    $("#click3").click(function(){
        $(".hidden").animate({opacity:'0'});
        $("#hidden3").animate({opacity:'0'});
        $("#hidden3").animate({opacity:'1'},"slow");    
        $("#hidden3").stop();
        });  
    $("#click4").click(function(){
        $(".hidden").animate({opacity:'0'});
        $("#hidden4").animate({opacity:'0'});
        $("#hidden4").animate({opacity:'1'},"slow");    
        $("#hidden4").stop();
        });  
    });


    <p id="click1">hover</p>
    <p id="click2">hover</p>
    <p id="click3">hover</p>
    <p id="click4">hover</p>

    <p id="hidden1" class="hidden">hidden 1</p>
    <p id="hidden2" class="hidden">hidden 2</p>
    <p id="hidden3" class="hidden">hidden 3</p>
    <p id="hidden4" class="hidden">hidden 4</p>
4

5 に答える 5

1

何かのようなもの

$(".hidden").css({opacity:'0'});
$("p[id^=click]").click(function(){
    var sufix = this.id.substring(5);
    var el = $("#hidden" + sufix);
    $(".hidden").stop().not(el).animate({opacity:'0'});
    el.animate({opacity:'1'},"slow");
});

デモ:フィドル

より良いパフォーマンスが必要な場合は、$('#click1, #click2, #click3, #click4')代わりに使用します$("p[id^=click]")

于 2013-03-18T16:17:31.750 に答える
0

すべてのホバー p に同じクラスを指定しclickableます。

への呼び出しをテストしていませんが、そのようにindex動作するはずです...

$(document).ready(function(){
      $(".hidden").animate({opacity:'0'});
      $(".clickable").click(function(){
          $(".hidden").animate({opacity:'0'});
          var idx = "#hidden" + $(".clickable").index(this);
          $(idx).animate({opacity:'0'});
          $(idx).animate({opacity:'1'},"slow");    
          $(idx).stop();
      });  
 });

編集: または追加のポイントに Arun P Johny のセレクターを使用します。p[id^=click]

于 2013-03-18T16:17:39.000 に答える
0

data属性を使用します。使いやすく、わかりやすく、有効です。

<p class="click" data-id="1">hover</p>
<p class="click" data-id="2">hover</p>
<p class="click" data-id="3">hover</p>
<p class="click" data-id="4">hover</p>

<p class="hidden" data-id="1">hidden 1</p>
<p class="hidden" data-id="2">hidden 2</p>
<p class="hidden" data-id="3">hidden 3</p>
<p class="hidden" data-id="4">hidden 4</p>


<script>
    function get_by_data(selector, data_string, data_value) {
        return $(selector + '[data-' + data_string + '="' + data_value + '"]');
    }
    $(document).ready(function() {
        $('.hidden').animate({opacity: '0'});
        $('.click').click(function() {
            var id = $(this).data('id');
            var $hidden = get_by_data('.hidden', 'id', id);
            $('.hidden').animate({opacity: '0'});
            $hidden.animate({opacity:'1'},'slow').stop();
        });
    });
</script>
于 2013-03-18T16:25:07.083 に答える
0

clickタグを共有クラスと一意のタグに分割します。たとえば、 index. 次に、共有クラスの要素が一般的にクリックされるのをリッスンします。

クリック コールバック内では、 を使用して実際にクリックされた要素を取得できます$(this)。indexそこから、 を使用してタグを取得しattr('index')ます。関連する隠しオブジェクトにのみアニメーションを適用できるとします。

したがって、最初にすべての隠しオブジェクトを取得して$(".hidden")から、フィルターを適用して正しいindexタグを持つ要素を見つけます.filter('[index="' + number + '"]')。

HTML

<p class="click" index="1">hover</p>
<p class="click" index="2">hover</p>
<p class="click" index="3">hover</p>
<p class="click" index="4">hover</p>

<p class="hidden" index="1">hidden 1</p>
<p class="hidden" index="2">hidden 2</p>
<p class="hidden" index="3">hidden 3</p>
<p class="hidden" index="4">hidden 4</p>

JavaScript

$(document).ready(function(){

    $('.hidden').animate({ opacity:'0' });

    $('.click').click(function(){
        $('.hidden').animate({ opacity:'0' });

        var number = $(this).attr("index");

        $('.hidden').filter('[index="' + number + '"]')
               .animate({ opacity:'0' })
               .animate({ opacity:'1' },"slow")
               .stop();
    });
});

さらに、上記のように同じオブジェクトで実行される関数を連鎖させることで、コードを短縮できます。

上記のコードを含む実用的なフィドルを次に示します。(ただの楽しみとして、スタイル付きバージョンも作成しました。)

于 2013-03-18T16:18:45.100 に答える
-1

1 から 4 までの for を使用できます。

$("#click" + index).click(function(){
    $(".hidden").animate({opacity:'0'});
    $("#hidden" + index).animate({opacity:'0'});
    $("#hidden" + index).animate({opacity:'1'},"slow");    
    $("#hidden" + index).stop();
    });
于 2013-03-18T16:14:41.593 に答える