jquery使用fadeToggle多个按钮和隐藏文本

时间:2014-01-23 18:59:02

标签: jquery html css

我无法让fadeToggle工作。我点击另一个div时用它来显示文字。这个目的是用于多个元素,所以我希望能有一种优雅而有效的方法来处理所有这些元素。

这是我目前所拥有的 - 哪些不起作用(我认为我没有正确使用“这个”:

$(document).ready(function() {
  $('#daily').click(function () {
    $('this p').fadeToggle(100);
  }):
  $('#color').click(function () {
    $('this p').fadeToggle(100);
  }):
  $('#bw').click(function () {
    $('this p').fadeToggle(100);
  }):
}):

这是jsfiddle:http://jsfiddle.net/qEKJe/

我想将它与.load()调用结合使用,不知道是否会改变它。

另外 - 奖励积分,如果你可以使它显示新的文本块关闭当前显示的任何

2 个答案:

答案 0 :(得分:2)

您可以更改您的选择器而不是每个id使用类名。声明$('this p')无效你需要这个:

$('.selectopt').click(function () {
    $(this).next('p').fadeToggle();
})

选中 Demo Fiddle

答案 1 :(得分:0)

http://jsfiddle.net/qEKJe/4/

为你的p添加了课程。

<div class="select">
    <div>
        <div id="daily" class="selectopt">Daily</div>
        <p class="daily-p">Daily photos description</p>
    </div>
    <div>
        <div id="color" class="selectopt">Color</div>
        <p class="color-p">Color photos description</p>
    </div>
    <div>
        <div id="bw"  class="selectopt">Black & White</div>
        <p class="bw-p">Black & White photos description</p>
    </div>
</div>

现在这对所有人都有效。

$(document).ready(function() {
    $('.selectopt').click(function () {
        var x = $(this).attr('id');
        $('.' + x + '-p').fadeToggle(100);
    });
});