javascript – jQuery – 淡入淡出不同的元素按钮单击

我正在尝试创建一些按钮,根据单击的按钮显示一个框.我这样做是通过给每个盒子自己的类并将一个参数传递给一个函数来识别哪个盒子是目标.然后我将此函数分配给页面上的每个按钮的onclick属性(我知道我应该将事件处理程序附加到单独的文件中).这是功能：

var show = function(BoxNumber){
    if($(this).hasClass('shown')){
       $(this).removeClass('shown');
       $(this).html('Show');
       $('.Box'+BoxNumber).fadeOut(1000);
      }
    else{
       $(this).html('Hide');
       $(this).addClass('shown');
       $('.Box'+BoxNumber).fadeIn(1000);
      }
 };
@H_403_8@
html：

Box 1Box1">Boxes
@H_403_8@
但是,此功能不起作用.首先,this关键字似乎不是以按钮为目标,因为按钮的html在点击时不会改变.但是,当我用按钮的类替换this关键字时,它工作正常.
其次,该功能可以精确地淡化框,但如果再次单击该按钮则不会隐藏它们.
我被卡住了所以任何帮助将不胜感激！谢谢.

最佳答案

解决方案1(所有jQuery)：

最简洁的方法是坚持使用jQuery进行点击处理.您已经在使用jQuery进行淡入淡出,为什么不利用它来绑定点击？试试这个：

jsFiddle

Box 1Box1">Box 2Box2">Box 3@H_403_8@
    

$('span').click(function () {
    var BoxNumber = $(this).index('span') + 1;
    if ($(this).hasClass('shown')) {
        $(this).removeClass('shown');
        $(this).html('Show');
        $('.Box' + BoxNumber).fadeIn(1000);
    } else {
        $(this).html('Hide');
        $(this).addClass('shown');
        $('.Box' + BoxNumber).fadeOut(1000);
    }
});
@H_403_8@
注意：如果您希望淡出框保留在文档中的位置,请尝试使用fadeTo().
解决方案2(混合)：
但是,如果您确实需要使用onclick属性来绑定您在示例中显示的单击处理程序,则可以这样执行：
jsFiddle

Box 1Box1">Box 2Box2">Box 3@H_403_8@
    

function show(BoxNumber,elem) {
    $this = $(elem);

    if ($this.hasClass('shown')) {
        $this.removeClass('shown');
        $this.html('Show');
        $('.Box' + BoxNumber).fadeIn(1000);
    } else {
        $this.html('Hide');
        $this.addClass('shown');
        $('.Box' + BoxNumber).fadeOut(1000);
    }
};
@H_403_8@


 原文链接：https://www.f2er.com/jquery/428175.html

javascript – jQuery – 淡入淡出不同的元素按钮单击

猜你在找的jQuery相关文章