如何使用函数将数组添加到参数？

Question

我对编程很陌生，我想知道是否有人可以帮助我。

我正在尝试制作一个弹出页面。我为每个点击区域设置变量，我用 div 设置每个区域并用 css 放置。同样对于每个弹出图像，我在 html 上的每个图像上放置 div id，并在 css 上设置 display = "none"。我想做一个功能，在touchend上显示一张图片，同时隐藏其他图片。

你能帮我写代码吗？

var pop = new Array("pop1","pop2","pop3","pop4","pop5","pop6");    
var clickArea = new Array("click1","click2","click3","click4","click5","click6");    
function diplay(click,show,hide){   
    click.addEventListner("touchend",function(){    
       show.style.display = "block";    
       hide.style.display = "none";    
    });    
};    
display("click[0]","pop[0]","pop[1,2,3,4,5]");

Answer 1

您不能将字符串视为 html 个元素。

假设页面中有带有点击区域 ID 的元素，您可以执行类似的操作（一旦文档准备就绪）。

var popEls = pop.map(function (id) { return document.getElementById(id) });

clickArea.forEach(function (id) {
 var clickAreaEl = document.getElementById(id);
 clickAreaEl.addEventListener('click', onClickAreaClick);
});

function onClickAreaClick() {
    var clickAreaNum = +this.id.match(/\d+$/)[0],
        popIndex = clickAreaNum - 1;

    popEls.forEach(function (popEl) {
        popEl.style.display = 'none';
    });

   popEls[popIndex].style.display = 'block';
}

Answer 2

这是一个使用 for 循环而不是 Arrays 等方法的示例

从定义你能定义的一切开始

var popup_id = ["pop1", "pop2", "pop3", "pop4", "pop5", "pop6"],
    popup_elm = [], // for referencing the elements later
    area_id = ["click1", "click2", "click3", "click4", "click5", "click6"],
    area_elm = [], // for referencing the elements later
    i; // for the for -- don't forget to var everything you use
// a function to hide all popups
function hideAll() {
    var i; // it's own var means it doesn't change anything outside the function
    for (i = 0; i < popup_elm.length; ++i) {
        popup_elm.style.display = 'none';
    }
}
// a function to attach listeners
function listenTouch(area, popup) {
    area.addEventListener('touchend', function () {
        hideAll();
        popup.style.display = 'block';
    });
    // we did this in it's own function to give us a "closure"
}

最后我们准备好开始将其全部链接到 DOM，我假设在浏览器中存在元素后执行以下代码

// setup - get Elements from ids, attach listeners
for (i = 0; i < popup_id.length; ++i) {
    popup_elm[i] = document.getElementById(popup_id[i]);
    area_elm[i] = document.getElementById(area_id[i]);
    listenTouch(area_elm[i], popup_elm[i]);
}

Answer 3

您的代码存在一些不同的问题。

您在调用 display 时使用了字符串而不是实际的代码结构引用。我明白你的意思是让这些引用元素 ids，但你必须首先使用 document.getElementById(...) 或 jQuery 的 $("#...").
在 pop 和 clickArea 数组中，您使用了没有 .style 对象的字符串。您需要自己引用元素。
您的代码结构不是为处理数组而设计的。
您需要先定义 addEventListener ，然后 您需要调用函数处理程序。你不想每次都这样。
display 函数中的 click 参数是多余的，因为它从未被调用过。
您正在使用 jQuery。你应该说明这一点！（但你被原谅了）:)
您无法使用语法 arrayName[#,#,#].
您拼写错误 "display"。哎呀！
数组是多余的，因为代码需要重构。

首先，为了解决第 4 点，当 DOM 完成加载时，我们需要此代码运行：

var clickArea = new Array("click1","click2","click3","click4","click5","click6");
clickArea.each(function(id){
    $("#"+id)[0].addEventListener("touchend", display);
});

接下来，我们需要解决您的代码存在的问题。上面已经解释过了。

var pop = new Array("pop1","pop2","pop3","pop4","pop5","pop6");
function display(event){
    var indx = Number(event.target.id.split(/\D/i).join(""));
    $("#pop"+indx)[0].style.display = "block";
    pop.each(function(ide) {
        if (ide.split(/\D/i).join("") != indx-1) {
            $("#"+ide)[0].style.display = "none";
        }
    });
};

否则，干得好！我们所有人都是这样开始的，相信你！保持！ P.S。您可以像这样设置数组 [ ? , ? , ? , ? ] 而不是 new Array( ? , ? , ? , ? ).

如何使用函数将数组添加到参数？

How to add array to parameter with function?

javascript

html

css

arrays

parameters