Question

我想摆脱重复的if条件，我如何创建一个函数并传递控件id以显示/隐藏特定的div。

这是代码。

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()方法：

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;

我不了解coffeeScript语法，所以我做了最好的猜测。在JS中，切换调用看起来像这样：

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

Answer 2

您也可以尝试以下代码。

__hash__

和您的javascript代码：

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

Answer 3

作为替代方案，您可以使用data-属性来配对元素。

您将该部分隐藏（例如，ID为h261-section的元素）一个数据值
（例如data-pair='h264'）和一个类（例如＆＃39; slave＆＃39;）和控制部分具有相同的数据值（例如具有id rtsp-value的元素）并且也给出了一个班级，例如＆＃39; control＆＃39;。

然后你可以循环遍历所有＆＃39;控制＆＃39;元素并找到他们匹配的奴隶＆＃39;要隐藏/显示的元素。

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

您可以轻松地将重复的搜索查询抽象为一种方法，使代码更清晰，更易于阅读。

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

上面使用coffeescript的字符串插值来抽象出你正在重复的搜索查询的常见部分。然后你可以这样称呼它：

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'

要改进这一点，您可以更改HTML ID，因为很难看到您正在检查的值与它们对应的部分之间的连接。您可以使用类而不是唯一ID：

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

其余部分将保留内容的.section类和网址的.link类。

那么函数就是：

 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

如何创建函数并传递control-id来显示/隐藏

4 个答案: