如何创建函数并将控制 ID 传递给显示/隐藏答案

【问题标题】：How to create function and pass control-id to show/hide如何创建函数并将控制 ID 传递给显示/隐藏
【发布时间】：2017-04-05 23:12:38
【问题描述】：

我想摆脱重复的 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'

【问题讨论】：

标签： javascript jquery coffeescript

【解决方案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);

【讨论】：

【解决方案2】：

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

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

和你的 javascript 代码：

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

【讨论】：

那么，你重写了$("element-selector").hide() ？只有没有 jquery 标准链接。
您可以为选择器添加一个通用属性，当嵌套的span 具有"Not available" 时，该属性将被隐藏。这将是一个不错的选择。
对，所以想法是您可以在 HideElement 函数中添加额外的逻辑？

【解决方案3】：

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

您给要隐藏的部分（例如，id 为 h261-section 的元素）一个数据值
（例如data-pair='h264'）和一个类（例如'slave'）和控制部分具有相同的数据值（例如，具有id rtsp-value 的元素）并且还给它一个类，例如'control'。

然后您可以遍历所有“控制”元素并找到它们匹配的“从”元素来隐藏/显示。

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

这样，您在添加新的控制/从属对时也无需更改代码。

【讨论】：

【解决方案4】：

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

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

上面使用咖啡脚本的字符串插值来抽象出您重复的搜索查询的公共部分。然后你可以这样称呼它：

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 类，为 url 保留 .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

【讨论】：