如何在javascript中重用函数

问题描述 投票：0回答：4

我在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脚本需要帮助。

javascript html css
4个回答
3
投票

试试这样：

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的父父容器，然后才能查询底层元素。

你的笨蛋应该是这样的：

<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>

请注意，小提琴缺少初始CSS，因此看起来很奇怪。

查询会让生活变得更轻松。

1
投票

原因是您的函数调用和元素ID。您没有ID为“att-list-1”，“att-list-2”等的元素。您有两个具有相同ID的元素：“att-list”。两个元素永远不应该具有相同的id。将id切换到“att-list-1”，“att-list-2”等等，它可能应该有效。 “plus-1”......和“minus-1”相同......，HTML中没有带有这些ID的元素，对于多个元素使用相同的ID“减号”和“加号”。

1
投票

您没有为元素使用唯一ID - 最好将类用于重复元素。无论如何，你可能想要这样的东西：

/*
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');
}
*/

function toggle_att_menu(element) {
   var parent = element.parentElement.parentElement;
   var att_list = parent.querySelector(".att-list");
   var plus = parent.querySelector(".plus");
   var minus = parent.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');
}
<div class="search-attribute hide-list" data-attr="condition">
<div class="title linklike">
    <span id="plus-1" class="plus">&#9656;</span><span id="minus-1" class="minus">&#9662;</span><a id="link-1" onclick="toggle_att_menu(this)" href="#"> condition </a>
</div>
<ul id="att-list-1" class="att-list">
    <li class="checkbox ">
        <label>
            <input id="condition_1_1" name="condition" class="multi_checkbox" value="1" type="checkbox"/>
            new
        </label>
    </li>
    <li class="checkbox ">
        <label>
            <input id="condition_1_2" name="condition" class="multi_checkbox" value="2" type="checkbox"/>
            like new
        </label>
    </li>
    <li class="checkbox ">
        <label>
            <input id="condition_1_3" name="condition" class="multi_checkbox" value="3" type="checkbox"/>
            excellent
        </label>
    </li>
    <li class="checkbox ">
        <label>
            <input id="condition_1_4" name="condition" class="multi_checkbox" value="4" type="checkbox"/>
            good
        </label>
    </li>
    <li class="checkbox ">
        <label>
            <input id="condition_1_5" name="condition" class="multi_checkbox" value="5" type="checkbox"/>
            fair
        </label>
    </li>
    <li class="checkbox ">
        <label>
            <input id="condition_1_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-2" onclick="toggle_att_menu(this)" href="#">condition</a>
    </div>
    <ul id="att-list-2" class="att-list">
        <li class="checkbox ">
            <label>
                <input id="condition_2_1" name="condition" class="multi_checkbox" value="1" type="checkbox"/>
                new
            </label>
        </li>
        <li class="checkbox ">
            <label>
                <input id="condition_2_2" name="condition" class="multi_checkbox" value="2" type="checkbox"/>
                like new
            </label>
        </li>
        <li class="checkbox ">
            <label>
                <input id="condition_2_3" name="condition" class="multi_checkbox" value="3" type="checkbox"/>
                excellent
            </label>
        </li>
        <li class="checkbox ">
            <label>
                <input id="condition_2_4" name="condition" class="multi_checkbox" value="4" type="checkbox"/>
                good
            </label>
        </li>
        <li class="checkbox ">
            <label>
                <input id="condition_2_5" name="condition" class="multi_checkbox" value="5" type="checkbox"/>
                fair
            </label>
        </li>
        <li class="checkbox ">
            <label>
                <input id="condition_2_6" name="condition" class="multi_checkbox" value="6" type="checkbox"/>
                damaged
            </label>
        </li>
    </ul>
</div>
1
投票

作为一般建议，请尝试：

  • 没有多次使用相同的id，因为这不是id应该如何工作。 Ids应该是独一无二的，否则，你将特别遇到CSS和JavaScript的问题。
  • 通过class或其他非独特的选择器而不是id，使用可以执行此操作的函数来获取元素，例如getElementsByClassName orquerySelectorAll，这样您就可以只使用一次函数了。
  • 使用window.getComputedStyle(el).getPropertyValue作为后备，当得到当前的display进行检查时，如果样式尚未定义（如果你没有第一次点击则什么都不做）。

现在，关于你的问题，因为你不能使用jQuery，获得元素将变得有点丑陋，并将在很大程度上取决于你如何相对于彼此定位它们。因为，您使用内联JavaScript来调用您的函数，请确保将this作为参数传递，以便能够使用该链接获取所需的元素。

片段：

/* ----- JavaScript ----- */
function toggle_att_menu(a) {
  var
    /* Cache all desired elements. */
    elements = {
      att_list: a.parentElement.nextElementSibling.children[0],
      plus: a.previousElementSibling.previousElementSibling,
      minus: a.previousElementSibling
    },
    
    /* Store the wanted displays for each element type. */
    displays = {
      att_list: {from: "block", to: "none"},
      plus: {from: "inline", to: "none"},
      minus: {from: "none", to: "inline"}
    };
    
  /* Iterate over every property of the elements object. */
  for (var type in elements) {
    var
      /* Cache the current element. */
      element = elements[type],

      /* Get the current display of the element. */
      d = element.style.display ||
        getComputedStyle(element, null).getPropertyValue("display");

    /* Set the element's display to the appropriate one. */
    element.style.display = (d != displays[type].from)
      ? displays[type].from
      : displays[type].to;
  }
}
/* ----- CSS ----- */
.plus { display: inline }
.minus { display: none }
<!----- HTML ----->
<div class="title linklike">
  <span class="plus">&#9656;</span>
  <span class="minus">&#9662;</span>
  <a class="linklike" onclick="toggle_att_menu(this)" href="#">condition</a>
</div>

<div class="search-attribute hide-list" data-attr="condition">
  <ul class="att-list">
    <li class="checkbox">
      <label>
        <input name="condition" class="multi_checkbox" value="1" type="checkbox"/>
        new
      </label>
    </li>
    <li class="checkbox">
      <label>
        <input name="condition" class="multi_checkbox" value="2" type="checkbox"/>
        like new
      </label>
    </li>
    <li class="checkbox">
      <label>
        <input name="condition" class="multi_checkbox" value="3" type="checkbox"/>
        excellent
      </label>
    </li>
    <li class="checkbox">
      <label>
        <input name="condition" class="multi_checkbox" value="4" type="checkbox"/>
        good
      </label>
    </li>
    <li class="checkbox">
      <label>
        <input name="condition" class="multi_checkbox" value="5" type="checkbox"/>
        fair
      </label>
    </li>
    <li class="checkbox">
      <label>
        <input name="condition" class="multi_checkbox" value="6" type="checkbox"/>
        damaged
      </label>
    </li>
  </ul>
</div>

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

<div class="search-attribute hide-list" data-attr="condition">
  <ul class="att-list">
    <li class="checkbox">
      <label>
        <input name="condition" class="multi_checkbox" value="1" type="checkbox"/>
        new
      </label>
    </li>
    <li class="checkbox">
      <label>
        <input name="condition" class="multi_checkbox" value="2" type="checkbox"/>
        like new
      </label>
    </li>
    <li class="checkbox">
      <label>
        <input name="condition" class="multi_checkbox" value="3" type="checkbox"/>
        excellent
      </label>
    </li>
    <li class="checkbox">
      <label>
        <input name="condition" class="multi_checkbox" value="4" type="checkbox"/>
        good
      </label>
    </li>
    <li class="checkbox">
      <label>
        <input name="condition" class="multi_checkbox" value="5" type="checkbox"/>
        fair
      </label>
    </li>
    <li class="checkbox">
      <label>
        <input name="condition" class="multi_checkbox" value="6" type="checkbox"/>
        damaged
      </label>
    </li>
  </ul>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.