Question

所以我有一个任务要为每个段落（其中的五个段落）创建功能（显示/隐藏），

function btn() {
    var x = document.getElementById('para');
    if (x.style.display == "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

对于每个段落，我使用Id代替类。因为任务每一段说一个按钮。

现在我有一个问题，如何同时为所有这些人应用此（彩色）功能。

function color() {
    bgColorCode = '#' + Math.floor((Math.random() * 999999) + 100000);
    elements = document.getElementByClassName('color');

    for (var i = 0; i < elements.length; i++) {
        document.getElementByClassName('color')[i].style.backgroundColor = bgColorCode;
    }
}

//Html
<button onclick = "color()">Color</button>
<button onclick = "btn()">Show/Hide</button>
<p id = "para"> Example 1 </p>

<button onclick = "btn2()">Show/Hide</button>
<p id = "para2"> Example 2 </p>
...

Idk如何将此功能“颜色”应用于我的所有段落，因为它们都在id下？

有解决方案吗？

Answer 1

如果将类let data = [ { "-LPjfZG88i8oir4qZeUr": { "description": "Tasty & Spicy", "menuName": "Chicken Spicy", "menuPrice": "15000" }, "-LPjmsYuscg0ceMTMriM": { "description": "Delicious", "menuName": "Sweet Chicken", "menuPrice": "17000" } } ] data.forEach((obj)=>{ Object.keys(obj).forEach((key,index)=>{ console.log('key:'key,'value:',obj[key]); }) })添加到color元素中，并将函数para更改为getElementByClassName()（您忘记了）。那么您的代码就可以了。在for循环中，可以使用元素数组getElementsByClassName()来代替对elements[i]函数的另一个调用。

getElementsByClassName()

function color() {
  bgColorCode = '#' + Math.floor((Math.random() * 999999) + 100000);
  elements = document.getElementsByClassName('color');

  for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = bgColorCode;
  }
}

//just slightly modified so it works with multiple paragraphs by making the id a function parameter.
function btn(id) {
  var x = document.getElementById(id);
  if (x.style.display == "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

Answer 2

希望这就是您想要的。告诉我您是否有疑问。

函数toggleshow(htmlObj)选择使用参数this触发函数的元素的下一个元素同级，参数style.display代表当前HTMLelement，并且none的值设置为{{1} }，然后将其值更改为block，否则将其更改为none。

请参阅HTML DOM manipulation

第二个函数color()接受HTML元素(string)id的高级参数，并遍历所有传递的参数并为每个id更改bgcolor。您可以根据需要传递许多参数。

请参阅this

document.querySelector('css selector')使用 css选择器

选择第一个html元素

function toggleshow(htmlObj){
  var par = htmlObj.nextElementSibling;
  if(par.style.display !== 'none'){
    par.style.display = 'none';
  }else{
    par.style.display = 'block';
  }
}

function color(){
  
  bgColorCode = '#' + Math.floor((Math.random() * 999999) + 100000);

  for (var i = 0; i < arguments.length; i++) {
      document.querySelector('#'+arguments[i]).style.backgroundColor = bgColorCode;
  }
}

button{
  display:block
}

<button onclick = "color('para', 'para2', 'para3', 'para4', 'para5')">Color</button>

<button onclick = "toggleshow(this)">Show/Hide</button>
<p id = "para"> Example 1 </p>

<button onclick = "toggleshow(this)">Show/Hide</button>
<p id = "para2"> Example 2 </p>

<button onclick = "toggleshow(this)">Show/Hide</button>
<p id = "para3"> Example 2 </p>

<button onclick = "toggleshow(this)">Show/Hide</button>
<p id = "para4"> Example 2 </p>

<button onclick = "toggleshow(this)">Show/Hide</button>
<p id = "para5"> Example 2 </p>

*对不起我的英语水平和拼写错误。

Answer 3

使用JQUERY更好，更动态的解决方案：

*如果您不知道如何使用Jquery，则可以检查Mark Baijens答案。

function btn(e) {
    if ($(e).next().css('display') == "none") {
      $(e).next().show()
      $(e).html("Hide")
    } else {
      $(e).next().hide()
      $(e).html("Show")
    }
}

function color() {
    bgColorCode = '#' + Math.floor((Math.random() * 999999) + 100000);
    //elements = document.getElementByClassName('color');

    $(".para").css("background-color",bgColorCode)
}

<div>
<button onclick = "color()">Color</button>
</div>
<hr>
<div id="wrapper">
<button onclick = "btn(this)">Show/Hide</button>
<p class="para"> Example 1 </p>
<hr>
<button onclick = "btn(this)">Show/Hide</button>
<p class="para"> Example 2 </p>
<hr>
<button onclick = "btn(this)">Show/Hide</button>
<p class="para"> Example 3 </p>
<hr>
<button onclick = "btn(this)">Show/Hide</button>
<p class="para"> Example 4 </p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

如何将类函数应用于id函数？

3 个答案: