Question

我一直在使用Jquery一段时间，我有一个关于糟糕/良好做法的问题。这是交易。假设我们有这个HTML：

 <span class="а_s_trigger" id="tekst1">text1</span>
 <span class="а_s_trigger" id="video1">video1</span>
                <div class="a_s_songvideo" id="showvideo1">

                        <object>
                           //video1
                        </object>

                </div>
                <div class="a_s_songtext" id="showtext1">

                        <p>
                        //text1
                        </p>

                </div>

以下jQuery函数在点击时触发隐藏/显示视频或文本元素。

$('.а_s_trigger')
           .bind('mouseover',function(e) {
                $(this).css({background:'#F3F3F3',cursor:'pointer'});
            })
            .bind('mouseout',function(e) {
                $(this).css({background:'#E6E6E6'});    
            })
            .bind('click',function(e) {
                var id=$(this).attr('id');
                var status=$(this).attr('id').toString().slice(0,5);
                var index=$(this).attr('id').toString().slice(5,7);
                var visibility=$('#showtext'+index).css('display');

                    if(status=='tekst1')
                    {
                        if(visibility=='block')
                        {
                            $('#showtext'+index).slideUp();
                        }
                        else if(visibility=='none')
                        {
                            $('#showtext'+index).slideDown();
                        }

                    }
                    else if(status=="video")
                    {
                        $('#showvideo'+index).toggle();
                    }




            });

一切都运转正常，但是我选择我需要的元素的方式是什么：

var id=this.id;
var status=$(this).attr('id').toString().slice(0,5);
var index=$(this).attr('id').toString().slice(5,7);
var visibility=$('#showtext'+index).css('display');

以这种方式将变量分配给字符串是否可以？我知道jQuery是关于选择器和漂亮的链接函数，如：

$(this).children().siblings().attr('id'); //and so on

我是否应该总是尝试使用链选择器选择元素，还是应该遵循“如果有效则不要改变它”的原则？

Answer 1

我是一个类人

 $(".button").  //etc

对我来说它更容易，你可以抓住多个元素，但如果你的方式没有问题就像你说的那样

如果有效则不要改变它！“

Answer 2

我认为条件使你的代码有点混乱，难以阅读。在我看来，您可以将状态封装在事件处理程序中。

将状态作为类添加到元素中。

<span class="а_s_trigger tekst" id="t_001">text1</span>
<span class="а_s_trigger video" id="v_001">video1</span>

相应地绑定：

$('.а_s_trigger').bind('mouseover',function(e) {
                        $(this).css({background:'#F3F3F3',cursor:'pointer'});
                }).bind('mouseout',function(e) {
                        $(this).css({background:'#E6E6E6'});
                });

$('.а_s_trigger .tekst').bind('click',function(e) {
    var index=this.id.toString().slice(2,6);
    var $element = $('#showtext'+index);
    var visibility=$element.css('display');
    if(visibility=='block')
    {
        $element.slideUp();
    }
    else
    {
        $element.slideDown();
    }});

$('.а_s_trigger .video').bind('click',function(e) {
    var index=this.id.toString().slice(2,6);
    $('#showvideo'+index).toggle;
});

编辑：

文本处理程序可以替换为（性能损失很小）：

$('.а_s_trigger .tekst').bind('click',function(e) {
    var index=this.id.toString().slice(2,6);
    $('#showtext'+index + ':visible').slideUp();
    $('#showtext'+index + ':hidden').slideDown();
});

Answer 3

没关系。由于您在条件登录中多次使用这些值，因此首先将它们存储到局部变量是有意义的。

随机说明：如果您只需要id，则this.id与$（this）.attr（'id'）的效果一样。

通过在字符串中捕获它们的类/ id来选择不同的元素被认为是一种不好的做法吗？

3 个答案: