0

所以我想把它简化成一个函数，但我不知道怎么做。看来我应该能够从点击 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

给你所有的 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]

于 2013-03-18T16:17:39.000 回答
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 回答
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 回答
-1

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

$("#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 回答