class/idを文字列でキャッチして別個の要素を選択することは悪い習慣と考えられますか？

Question

私はしばらくの間Jqueryを使用してきましたが、私は悪い/良い方法に関する質問があります。ここでの取引です。

<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の機能：私たちは、このHTMLを考えてみましょう。

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

それは、このような方法で文字列に変数を割り当てるにはOKですか？

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

私は常にチェーンセレクタを使って要素を選択してみてくださいまたはそれを変更しない動作する場合、私は、」原則に従ってください： 私はjQueryのすべてのセレクタについてですなど素敵な連鎖機能があることを知っています！ "？

Answer 1

私はそのはるかに簡単に私にはクラスの男

$(".button"). //etc 

だとあなたが複数の要素をつかむことができますが、場合

を言ったように、あなたの方法に問題がない場合それは動作しません！」

Answer 2

いいです。条件付きログインで複数回値を使用しているので、最初にローカル変数に値を格納することは理にかなっています。

ランダムノート：idだけが必要な場合、this.idは$（this）.attr（ 'id'）と同様に動作します。

Answer 3

私の考えでは、あなたのコードはちょっと混乱していると思います。 ouはイベントハンドラ内のステータスをカプセル化できます。

ステータスをクラスに要素として追加します。

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