Question

所以我想把它简化成一个函数，但我不知道如何。看来我应该能够从click ids中提取变量，然后在隐藏的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>

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

演示：Fiddle

如果想要使用$('#click1, #click2, #click3, #click4')代替$("p[id^=click]")

，请使用更好的效果

Answer 2

将所有hover-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]

Answer 3

将标记拆分为共享类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();
    });
});

此外，您可以通过链接在同一对象上执行的函数来缩短代码，如上所示。

以下是包含上述代码的working fiddle。（为了好玩，我也做了styled version。）

Answer 4

使用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>

Answer 5

你可以使用a，从1到4.然后在里面你可以有

$("#click" + index).click(function(){
    $(".hidden").animate({opacity:'0'});
    $("#hidden" + index).animate({opacity:'0'});
    $("#hidden" + index).animate({opacity:'1'},"slow");    
    $("#hidden" + index).stop();
    });

我该如何简化这个？

5 个答案: