javascript - 如何在javascript中重用函数

Question

我用javascript写了一个函数。它非常适合在单击操作时显示和隐藏列表项。我还有其他 5 个列表项，我也想为它们使用此功能。但是，当我尝试通过将参数作为 ID 传递来概括该函数时，它不起作用。

html 的以下部分:

function toggle_att_menu() {

  var att_list = document.getElementById("att-list");
  var plus = document.getElementById("plus");
  var minus = document.getElementById("minus");

  att_list.style.display= 
((att_list.style.display!='block')?'block':'none');
  plus.style.display= 
((plus.style.display!='none')?'none':'inline');
  minus.style.display= 
((minus.style.display!='inline')?'inline':'none');

}

// what I want to do is passing parameter as following:
function toggle_att_menu(x,y,z) {

  var att_list = document.getElementById(x);
  var plus = document.getElementById(y);
  var minus = document.getElementById(z);

  att_list.style.display= 
  ((att_list.style.display!='block')?'block':'none');
  plus.style.display= 
  ((plus.style.display!='none')?'none':'inline');
  minus.style.display= 
  ((minus.style.display!='inline')?'inline':'none');
}

//and use the function five times with different IDs each time as following:

        toggle_att_menu('att-list-1','plus-1','minus-1')
        toggle_att_menu('att-list-2','plus-2','minus-2')  
        toggle_att_menu('att-list-3','plus-3','minus-3')  
        toggle_att_menu('att-list-4','plus-4','minus-4')  
        toggle_att_menu('att-list-5','plus-5','minus-5') 

<div class="title linklike">
<span id="plus-1" class="plus" >&#9656;</span><span id="minus-1" class="minus">&#9662;</span> <a id="linklike" onclick="toggle_att_menu()" href="#"> condition </a>
</div>

<ul id= "att-list-1" class="att-list">
  <li class="checkbox ">
      <label>
          <input id="condition_1" name="condition" class="multi_checkbox" value="1" type="checkbox"
           />
          new
      </label>
  </li>
  <li class="checkbox ">
      <label>
          <input id="condition_2" name="condition" class="multi_checkbox" value="2" type="checkbox"
           />
          like new
      </label>
  </li>
  <li class="checkbox ">
      <label>
          <input id="condition_3" name="condition" class="multi_checkbox" value="3" type="checkbox"
           />
          excellent
      </label>
  </li>
  <li class="checkbox ">
      <label>
          <input id="condition_4" name="condition" class="multi_checkbox" value="4" type="checkbox"
           />
          good
      </label>
  </li>
  <li class="checkbox ">
      <label>
          <input id="condition_5" name="condition" class="multi_checkbox" value="5" type="checkbox"
           />
          fair
      </label>
  </li>
  <li class="checkbox ">
      <label>
          <input id="condition_6" name="condition" class="multi_checkbox" value="6" type="checkbox"
           />
          damegaed
      </label>
  </li>
</ul>

</div>



<div class="search-attribute hide-list" data-attr="condition">
  <div class="title linklike">
<span id="plus-2" class="plus" >&#9656;</span><span id="minus-2" class="minus">&#9662;</span> <a id="link" onclick="toggle_att_menu()" href="#">condition</a>
</div>

<ul id= "att-list-2" class="att-list">
  <li class="checkbox ">
      <label>
          <input id="condition_1" name="condition" class="multi_checkbox" value="1" type="checkbox"
           />
          new
      </label>
  </li>
  <li class="checkbox ">
      <label>
          <input id="condition_2" name="condition" class="multi_checkbox" value="2" type="checkbox"
           />
          like new
      </label>
  </li>
  <li class="checkbox ">
      <label>
          <input id="condition_3" name="condition" class="multi_checkbox" value="3" type="checkbox"
           />
          excellent
      </label>
  </li>
  <li class="checkbox ">
      <label>
          <input id="condition_4" name="condition" class="multi_checkbox" value="4" type="checkbox"
           />
          good
      </label>
  </li>
  <li class="checkbox ">
      <label>
          <input id="condition_5" name="condition" class="multi_checkbox" value="5" type="checkbox"
           />
          fair
      </label>
  </li>
  <li class="checkbox ">
      <label>
          <input id="condition_6" name="condition" class="multi_checkbox" value="6" type="checkbox"
           />
          damaged
      </label>
  </li>
</ul>

</div>

任何想法或解决方案将不胜感激。我对 jQuery 不是很熟悉。所以请我只使用纯 java 脚本需要帮助。

Answer 1

像这样尝试:

https://jsfiddle.net/bertdireins/dtmdod15/6/

function toggle_att_menu(elem) {

       var container = elem.parentElement.parentElement;

       var att_list = container.querySelector(".att-list");
       var plus = container.querySelector(".plus");
       var minus = container.querySelector(".minus");

       att_list.style.display = ((att_list.style.display!='block')?'block':'none');
       plus.style.display =((plus.style.display!='none')?'none':'inline');
       minus.style.display = ((minus.style.display!='inline')?'inline':'none');
}

你首先必须得到你的anker的parent parent的容器，然后你可以查询底层元素。

你的 ankers 应该看起来像这样:

<div class="title linklike">
    <span id="plus" class="plus">&#9656;</span>
    <span id="minus" class="minus">&#9662;</span>
    <a id="linklike" onclick="toggle_att_menu(this)" href="#"> condition </a>
</div>

<ul id="att-list" class="att-list"> ... </ul>

请注意 fiddle 缺少初始 CSS，因此看起来有点奇怪。

查询会让这里的生活更轻松。