Question

我有一个由一些div组成的列表，它们都有一个与.lnkInfo类有关的信息链接。单击时，它应该触发一个函数，将类show添加到另一个div（比如某种PopUp），这样它就可见了，再次点击时它应该隐藏它。

我很确定这一定是一个非常基本的事情，我很可能会得到一些嘲笑......但是嘿！一旦我解决了这个问题，我就不得不再问一次了。无论如何，我开始离开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中的数据，因此我只想添加一个hide / show。

$(".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：

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

如果你设法在整个时空中找到这个答案，请知道这就是解决方案的结束方式，这可能会帮助你完成不再是一个菜鸟。

SOLUTION

Answer 1

这是一个基本的工作示例，说明在给定当前代码后单击特定元素后如何显示弹出窗口。请注意，我在您的链接元素中添加了一个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.

有各种方法可以将其概括为适用于所有链接/弹出窗口。您可以为每个链接元素（more on data-）添加data-link-number=1，data-link-number=2等。选择包含所有链接的元素。将该元素绑定到一个事件侦听器，单击该事件侦听器时，会检测单击的链接元素（请参阅event delegation / "bubbling"）。您可以根据data-link-number属性的值确定点击了哪个链接。然后显示相应的弹出窗口。

您可能还想使用jQuery。通过设置它的className属性来更改元素的类会产生脆弱的DOM代码。可以使用addClass和removeClass方法。 jQuery的事件也可以跨浏览器工作; element.addEventListener()将无法在仍然具有重要市场份额的IE8中运行。

循环到数组时添加类

1 个答案: