如何创建函数并将 control-id 传递给 show/hide

Question

我想摆脱重复的 if 条件，如何创建函数并传递控件 ID 以便 show/hide 具体 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

您也可以试试下面的代码。

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

和您的 javascript 代码：

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

Answer 3

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

您给要隐藏的部分（例如，id 为 h261-section 的元素）一个数据值
（例如data-pair='h264'）和一个class（例如'slave'）和控制部分相同的数据值（例如id为rtsp-value的元素）以及给出 class，例如 'control'.

然后你可以遍历所有 'control' 元素并找到它们匹配的 'slave' 元素到 hide/show.

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

这样，您也永远不需要在添加新的 control/slave 对时更改代码。

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，因为很难看出您正在检查的值与它们对应的部分之间的联系。您可以使用 classes 而不是唯一 ID：

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

剩下的就是保留内容的 .section class 和 url.

的 .link class

那么函数就是：

 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 传递给 show/hide

How to create function and pass control-id to show/hide

javascript

jquery

coffeescript