Считается ли плохой практикой выделять отдельные элементы, перехватывая их класс / идентификатор в строке?

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

EDIT:

Обработчик текста может быть заменен (с небольшим снижением производительности):

$('.а_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

Всё хорошо. Поскольку при условном входе в систему вы используете значения несколько раз, имеет смысл сначала сохранить их в локальной переменной.

Случайная заметка: если вам просто нужен идентификатор, this.id работает так же, как и $ (this) .attr ('id').