元素未按预期显示/隐藏 jquery答案

【问题标题】：Element not showing/hiding as expected with jquery元素未按预期显示/隐藏 jquery
【发布时间】：2016-01-14 14:09:49
【问题描述】：

我有一些显示和隐藏一些帮助文本的 javascript。除非存在 select2 字段，否则每次都可以正常工作。

HTML：

<div class="help-wrap">
  <div class="form-group">
    <label class="control-label required" for="s2id_autogen1">Occupation</label>
    <div class="select2-container form-control select2 select2-allowclear" id="s2id_milestone_client1_occupation"><a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabindex="-1">   <span class="select2-chosen">Abstractor</span><abbr class="select2-search-choice-close"></abbr>   <span class="select2-arrow"><b></b></span></a><input class="select2-focusser select2-offscreen" type="text" id="s2id_autogen1"><div class="select2-drop select2-display-none select2-with-searchbox">   <div class="select2-search">       <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input">   </div>   <ul class="select2-results">   </ul></div></div>
    <select class="form-control select2 select2-offscreen" id="milestone_client1_occupation" name="milestone[client1_occupation]" tabindex="-1"><option value="">        </option>
      <option value="001">Abattoir Worker</option>
      <option value="C89">Zoology Consultant</option>
    </select>
  </div>
  <span class="fa fa-question-circle"></span>
  <div class="help-text">
    Please select your occupation, if you cannot find an exact match for your occupation then please choose the closest match.
  </div>
</div>

咖啡脚本：

$(document).on 'page:load', ->
  $(document).on 'click', (e) ->
    $('.help-wrap span').each (i,el) ->
      trig = el
      if trig != e.target && !$(trig).has(e.target).length
        $(trig).removeClass('active')
        $(trig).parents('.help-wrap').find('.help-text').hide()
      else
        $(trig).parents('.help-wrap').find('.help-text').toggle()
        $(trig).toggleClass('active')

当我单击跨度时，它会切换是否显示帮助文本 - 除非存在 select2 字段，否则这工作正常。在这种情况下，什么都不会发生？

单击页面上除跨度以外的任何位置都会按预期隐藏帮助文本。

提前致谢

【问题讨论】：

标签： javascript jquery coffeescript select2

【解决方案1】：

我写的js代码如下：

使用传统语法：

$( document ).ready(function() {
     $(document).click(function(e) { 
       // Check for left button
       if (e.button == 0) {
         $('.help-wrap span').each(function (i, el) {
            var trig;
            trig = el;
            if (trig !== e.target && !$(trig).has(e.target).length) {
                $(trig).removeClass('active');
                return $(trig).parents('.help-wrap').find('.help-text').hide();
            } else {
                $(trig).parents('.help-wrap').find('.help-text').toggle();
                return $(trig).toggleClass('active');
            }
        });
       }
     });
  });

使用咖啡脚本：

$(document).ready ->
  $(document).click (e) ->
    # Check for left button
    if e.button == 0
      $('.help-wrap span').each (i, el) ->
        trig = undefined
        trig = el
        if trig != e.target and !$(trig).has(e.target).length
          $(trig).removeClass 'active'
          $(trig).parents('.help-wrap').find('.help-text').hide()
        else
          $(trig).parents('.help-wrap').find('.help-text').toggle()
          $(trig).toggleClass 'active'
    return
  return

这似乎对我有用，使用这个 html：

<body>
  <div class="help-wrap">
  <div class="form-group">
    <label class="control-label required" for="s2id_autogen1">Occupation</label>

   <div class="select2-container form-control select2 select2-allowclear" id="s2id_milestone_client1_occupation"><a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabindex="-1">   <span class="select2-chosen">Abstractor</span><abbr class="select2-search-choice-close"></abbr>   <span class="select2-arrow"><b></b></span></a><input class="select2-focusser select2-offscreen" type="text" id="s2id_autogen1"><div class="select2-drop select2-display-none select2-with-searchbox">   <div class="select2-search">       <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input">   </div>   <ul class="select2-results">   </ul></div></div>


    <select class="form-control select2 select2-offscreen" id="milestone_client1_occupation" name="milestone[client1_occupation]" tabindex="-1"><option value="">        </option>
      <option value="001">Abattoir Worker</option>
      <option value="C89">Zoology Consultant</option>
    </select>

  </div>
  <span class="fa fa-question-circle"></span>
  <div class="help-text">
    Please select your occupation, if you cannot find an exact match for your occupation then please choose the closest match.
  </div>
</div>
</body>

【讨论】：

欢呼，但似乎不起作用。单击跨度不会切换帮助文本。 display:block 内联添加到帮助文本元素中，但不会更改为 display:none @randall-valenciano

【解决方案2】：

原来选择器不够具体。

将$('.help-wrap span') 更改为更具体的内容。

感谢您的帮助

【讨论】：