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

以下是使用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 2

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

在调用display时，您使用了字符串而不是实际的代码结构引用。我知道你的意思是引用元素id，但你必须首先使用document.getElementById(...)或jQuery $("#...")来获取元素。
在pop和clickArea数组中，您使用了没有.style对象的字符串。您需要自己引用元素。
您的代码结构不是为处理数组而设计的。
您需要在之前定义addEventListener ，您需要调用函数处理程序。你不是每次都想要这个。

click函数中的display参数是多余的，因为它永远不会被调用。

您正在使用jQuery。你应该说明这个！（但你原谅）：）

您无法使用语法arrayName[#,#,#]进入数组。

你拼错了＃34;显示＆＃34;。哎呦！

数组是冗余的，因为代码需要重新构建。

首先，为了解决Point＃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"; } }); };

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

Answer 3

您不能将字符串视为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';
}

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

3 个答案: