jQuery 在不同元素上切换，而不为每个 id 元素创建新函数答案

【问题标题】：jQuery toggle on different elements without creating a new function for each id elementjQuery 在不同元素上切换，而不为每个 id 元素创建新函数
【发布时间】：2013-08-15 15:11:28
【问题描述】：

有没有一种方法可以让 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/

【问题讨论】：

标签： jquery function toggle

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

试试：

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

jsFiddle example

【讨论】：

【解决方案3】：

你应该在 div 上使用类

Demo

//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,
    });
});

【讨论】：