jquery - jQuery 在不同的元素上切换，而不为每个 id 元素创建一个新函数

Question

有没有一种方法可以使 jQuery 切换在同一页面上的不同元素上工作，而无需为每个 id 元素设置一个函数。

这就是我到目前为止所拥有的。

jQuery：

//Toggle-->
$('#clickme_info_1').click(function() { 
$( '.toggle_info_1' ).animate({ "height": "toggle", "opacity": "toggle" }, "slow" )
});

$('#clickme_info_2').click(function() { 
    $( '.toggle_info_2' ).animate({ "height": "toggle", "opacity": "toggle" }, "slow" )
});

HTML：

<div id="testSlider04" class="flexslider">
<ul class="slides">
    <li>
        <div id="clickme_info_1">+</div>
        <div class="toggle_info_1">Info 1 shows</div>
        Slide 1
    </li>
    <li>
        <div id="clickme_info_2">+</div>
        <div class="toggle_info_2">Info 2 shows</div>
        Slide 2
    </li>
</ul>
</div>

你可以在这里看到它工作http://jsfiddle.net/RaulMv/​​5FsPJ /

Answer 1

将一个类添加到 + 元素并在动画上将该类添加到单击功能，然后在动画上将切换更改为 $(this).next()

$('.yourclassname').click(function() { 
    $( this ).next().animate({ "height": "toggle", "opacity": "toggle" }, "slow" )
});

这是一个工作示例：http: //jsfiddle.net/5FsPJ/3/

Answer 2

尝试：

$('#testSlider04 li > div').click(function() { 
    $(this).next().animate({ "height": "toggle", "opacity": "toggle" }, "slow" )
});

jsFiddle 示例

Answer 3

你应该在 div 上使用类

演示

//Toggle-->
$('.clickme_info_1').click(function() { 
    $( this ).next().animate({ "height": "toggle", "opacity": "toggle" }, "slow" )
});


//FlexSlider-->
$(document).ready(function () {
    $('#testSlider04').flexslider({
        animation: "slide",
        animationLoop: true,
        slideshow: false,
        slideshowSpeed: 7000,
        animationSpeed: 600,
        initDelay: 0,
        randomize: false,
    });
});