在循环到数组时添加类

Adding a class while looping to an array

本文关键字：添加 数组 循环      更新时间：2023-09-26

我有一个由一些div组成的列表，所有这些div都有一个与class.lnkInfo的信息链接。点击时，它应该会触发一个函数，将class show添加到另一个div中（就像某种弹出窗口），这样它就可见了，再次点击时应该会隐藏它。

我很确定这一定是一件非常基本的事情，很可能我会受到一些嘲笑。。。但是嘿！一旦我把这个记下来，我就再也不用问了。无论如何，我开始离开html和css的安全性，开始学习JS、PHP等，我遇到了一些问题。

在它工作之前对它进行测试时，直到我添加了另一个div，它只与第一个div一起工作，读了一点，并提出了一些建议，我意识到它一定是与数组有关的东西，问题是我不太确定实现我所可视化的内容的语法。

如有任何帮助，我们将不胜感激。

这是我的JS代码，下面我将攻击html的外观，以防万一。

var infoLab = document.getElementsByClassName('lnkInfo'),
closeInfo = document.getElementById('btnCerrar'); 
infoLab.addEventListener('click', function () {
    for (var i = 0 ; i < infoLab.length; i++) {
        var links = infoLab[i];
        displayPopUp('popUpCorrecto1', 'infoLab[i]');
    };
});
function displayPopUp(pIdDiv, infoLab[i]){
var display = document.getElementById(pIdDiv),
for (var i = 0 ; i < infoLab.length; i++) {
    infoLab[i]
 newClass ='';
 newClass = display.className.replace('hide','');
 display.className = newClass + ' show';
  };
}

JSFiddle。

非常感谢提前和抱歉任何脸手掌！

编辑：

这是一个jQuery函数（在另一个文件中），我需要使用链接调用它，因为它会获取div内部的数据，因此我只想添加一个隐藏/显示。

$(".lnkInfo").click(function() {
  var id = $('#txtId').val();
  var request = $.ajax({
    url: "includes/functionsLabs.php",
    type: "post",
    data: {
    'call': 'displayInfoLabs',
    'pId':id},
    dataType: 'html',
 success: function(response){
    $('#info').html(response);

     }
  });
});

编辑2:

对于这个问题的未来读者，

如果你在整个时空中都能找到这个答案，知道这就是解决方案的结局，愿它能帮助你停止成为一个角落。

溶液

下面是一个基本的工作示例，说明在给定当前代码的情况下，如何在单击特定元素后显示弹出窗口。请注意，我为您的链接元素添加了一个id。

// Select the element.
var infoLink1 = document.getElementById('infoLink1'); 
// Add an event listener to that element.
infoLink1.addEventListener('click', function () {
    displayPopUp('popUpCorrecto1');
});
// Display a the popup by removing it's default "hide"
// class and adding a "show" class.
function displayPopUp(pIdDiv) {
    var display = document.getElementById(pIdDiv);
    var newClass = display.className.replace('hide', '');
    display.className = newClass + ' show';
}

Fiddle。

有多种方法可以将其推广到适用于所有链接/弹出窗口。您可以向每个链接元素添加一个data-link-number=1、data-link-number=2等（有关data-的详细信息）。选择一个包含所有链接的元素。将事件侦听器绑定到该元素，该事件侦听器在单击时检测被单击的链接元素（请参阅事件委派/"冒泡"）。您可以根据data-link-number属性的值来确定单击了哪个链接。然后显示相应的弹出窗口。

您可能还想为此使用jQuery。通过设置元素的className属性来更改元素的类会导致DOM代码变得脆弱。有一个addClass和一个removeClass方法可用。jQuery的事件也可以跨浏览器工作；element.addEventListener()不会在IE8中工作，IE8仍有很大的市场份额。

相关文章：