どのように関数を作成し、表示/非表示にするcontrol-idを

Question

私は関数を作成し、特定のdivを表示/非表示にするためのコントロールIDを渡すことができますか？

ここにコードがあります。

hideNotAvailableURLS = -> 
    if $('#rtsp-value:contains("Not available")').length > 0 
    $('#h264-section').addClass 'hide' 
    else 
    $('#h264-section').removeClass 'hide' 

    if $('#camera_hls span:contains("Not available")').length > 0 
    $('#hls-section').addClass 'hide' 
    else 
    $('#hls-section').removeClass 'hide' 

    if $('#camera_h264 span:contains("Not available")').length > 0 
    $('#rtsp-section').addClass 'hide' 
    else 
    $('#rtsp-section').removeClass 'hide' 

    if $('#camera_rtmp span:contains("Not available")').length > 0 
    $('#rtmp-section').addClass 'hide' 
    else 
    $('#rtmp-section').removeClass 'hide' 

    if $('#camera_link span:contains("Not available")').length > 0 
    $('#camera-section').addClass 'hide' 
    else 
    $('#camera-section').removeClass 'hide' 

    if $('#camera_http_jpg span:contains("Not available")').length > 0 
    $('#snapshot-section').addClass 'hide' 
    else 
    $('#snapshot-section').removeClass 'hide' 

Answer 1

機能にロジックを抽出する必要はありません - あなただけのjQueryのtoggle()メソッドを使用することができます：私はCoffeeScriptの構文を知らないので、私は最良の推測を撮影した

hideNotAvailableURLS = 
    $('#h264-section').toggleClass 'hide', $('#rtsp-value:contains("Not available")').length > 0; 
    $('#hls-section').toggleClass 'hide', $('#camera_hls span:contains("Not available")').length > 0; 
    $('#rtsp-section').toggleClass 'hide', $('#camera_h264 span:contains("Not available")').length > 0; 
    $('#camera-section').toggleClass 'hide', $('#camera_rtmp span:contains("Not available")').length > 0; 
    $('#snapshot-section').toggleClass 'hide', $('#camera_http_jpg span:contains("Not available")').length > 0; 

を。 JSでは、トグルコールは次のようになります。

$('#h264-section').toggleClass('hide', $('#rtsp-value:contains("Not available")').length > 0); 

Answer 2

このベローコードを試すこともできます。

$(function(){ 
    $.fn.HideElement = function(){ 
     var element=$(this); 
     element.hide(); 
    } 
}); 

とあなたのJavaScriptコード：

$("element-selector").HideElement(); 

Answer 3

別の方法として、あなたは要素をペアリングするdata-属性を使用することができます。

あなたが非表示にするセクションを与える（例えば、IDのH261-部を有する素子）1つのデータ値
（例えばdata-pair='h264'）およびクラス（例えば「スレーブ」）と、制御部と同じDATA-値（例えばidがrtsp-valueの要素）、そのクラスにも 'control'などのクラスを与えます。

次に、すべての 'control'要素をループして、一致する 'slave'要素を見つけて表示することができます。 JSで

例：

<div class='control' data-pair='h264'>rtsp</div> 
<div class='control' data-pair='hls'>camera_hls</div> 

<div class='slave' data-pair='h264' id='h264-section'>h264 section</div> 
<div class='slave' data-pair='hls' id='hls-section'>hls section</div> 

やコード：

$(".control").each(function() { 
    if ($(this).find("span:contains("Not available").length > 0) { 
     var pair = $(this).data("pair"); 
     $(".slave[data-pair='" + pair + "']).hide();    
    } else { 
     $(".slave[data-pair='" + pair + "']).show(); 
    } 
}); 

この方法、あなたはまた、あなたが新しい制御/スレーブのペアを追加すると、あなたのコードを変更する必要はありません。

Answer 4

繰り返し検索クエリを簡単に抽象化して、コードをよりきれいにして読みやすくすることができます。

上記では、繰り返していた検索クエリの共通部分を抽象化するcoffeescriptの文字列補間を使用しています。それはあなたがチェックしている値、そして、彼らはあまりにも対応セクションとの間の接続を確認するのは困難だとして、あなたは、あなたのHTML IDを変更することができ、この上で改善するに

hideNotAvailableURLS = -> 
    hideIfNotAvailable '#h264-section', '#rtsp-value' 
    hideIfNotAvailable '#hls-section', '#camera_hls' 
    hideIfNotAvailable '#rtsp-section', '#camera_h264' 
    hideIfNotAvailable '#rtmp-section', '#camera_rtmp' 
    hideIfNotAvailable '#camera-section', '#camera_link' 
    hideIfNotAvailable '#snapshot-section', '#camera_http_jpg' 

： あなたは、このようにそれを呼び出すことができます。 代わりにユニークなIDのクラスを使用することができます。

<a class="link h264"> 
    H264 (Not Available) 
</a> 
. 
. 
. 
<div class="section h264"> 
    This should be hidden 
</div> 

残りは、URLのコンテンツと.linkクラスの.sectionクラスを維持することによってたどります。

hideIfNotAvailable = (name) -> 
    shouldHide = $(".link.#{name}:contains(\"Not available"\)").length is 0 
    $(".section.#{name}").toggleClass 'hide', shouldHide 

そして、あなたはループの中でそれを呼び出す：

次に、関数は単純になり

hideNotAvailableURLS = -> 
    sections = ['h264', 'hls', 'rtsp', 'rtmp', 'camera', 'snapshot'] 
    hideIfNotAvailable(section) for section in sections