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

向+元素和animate添加一个类将该类添加到click函数，并在animate上将切换更改为$（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 example

Answer 3

你应该在div上使用class

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

jQuery在不为每个id元素创建新函数的情况下切换不同的元素

3 个答案: