0

ヘルプ テキストを表示および非表示にする 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フィールドが存在しない限り、これは正常に機能します。その場合、何も起こりませんか？

スパン以外のページ上の任意の場所をクリックすると、予想どおりヘルプ テキストが非表示になります。

前もって感謝します

4

2 に答える 2