相关疑难解决方法(0)

如果我有这样的HTML:

<a href="#" class="movieImg"><div class="previewBulk"></div></a>
<a href="#" class="movieImg"><div class="previewBulk"></div></a>

和Javascript这样:

var movie = document.getElementsByClassName("movieImg");
var preview = document.getElementsByClassName("preview");

有没有办法addEventListener2电影标签和预览div标签？我尝试循环,但当我做的事情:

for(var i = 0, j=movie.length; i<j; i++){
 movie[i].style.left = 100;
 preview[i].style.left = 100;
}

我得到 Uncaught TypeError: Cannot read property 'style' of undefined.

更改预览到previewBulk后,我仍然得到错误,我的代码实际上看起来像这样

(function(){
        var movie = document.getElementsByClassName("movieImg"),
        preview = document.getElementsByClassName("previewBulk");
        //result = [];

        for(var i = 0, j=movie.length; i<j; i++){
            movie[i].addEventListener("mouseover", function(){

                preview[i].style.left = ((movie[i].offsetWidth-preview[i].offsetWidth)/2)+20;
                preview[i].style.top = -(movie[i].offsetHeight+preview[i].offsetHeight);
                preview[i].style.visibility = "visible";
            });

            movie[i].addEventListener("mouseout", function(){ …

在HTML中,我有一个按钮列表.如果用户单击按钮,
doCommand将调用该函数.代码如下,

<ul>
<li class="button1" onclick="doCommand('bold');" id="bold-button" title="bold">B</li>
<li class="button2" onclick="doCommand('bold');" id="italic-button" title="bold">I</li>
<li class="button3" onclick="doCommand('bold');" id="underline-button" title="bold">U</li>
<li class="button4" onclick="doCommand('bold');" id="strikethrough-button" title="bold">S</li>
</ul>

这是简单的表达,普通的网络程序员会这样编码.但是,onclick出于安全原因,我想隐藏事件及其功能.所以HTML代码将是这样的,

<ul>
<li class="button1" id="bold-button" title="bold">B</li>
<li class="button2" id="italic-button" title="bold">I</li>
<li class="button3" id="underline-button" title="bold">U</li>
<li class="button4" id="strikethrough-button" title="bold">S</li>
</ul>

有没有有效的方法来做到这一点？隐藏onclick财产,但做同样的工作.我正在使用jQuery.

我有一个人员搜索脚本，可以在您键入时显示建议。结果的结构大致如下：

<div  id="peopleResults">
  <div class="resultHolder">
    <div data-userid="ABC123" class="person">
        <div class="name">Last, First</div>
        <div class="title">Job Title</div>
        <a class="email" href="mailto:person@company.com">person@company.com</a><span class="phone">12345</span>
    </div>
    <!-- more people... -->
  </div>
</div>

由于人员列表会在您键入时发生更改，因此到目前为止，我一直在使用 JQuery 的 live() 函数将单击事件自动绑定到所有 .person 元素。这是已弃用且不好的做法，因此我正在尝试更新代码。

我发现我可以使用类似的东西：

$('#peopleResults').on('click', '.person', function(){
    // handle the click
})

但我想更多地了解如何在普通 JavaScript 中处理这个问题。我认为，当通过单击事件单击某个项目的子项时，该事件会在元素中“冒泡”，并且当它击中 .person 元素时我可以捕获它。请原谅草率的代码，但类似：

document.getElementById('peopleResults').addEventListener('click', function(e){
    if(e.target.classList.contains('person')) {
        // handle click 
    }
});

我过去做过类似的事情，但通常带有链接。（在这种情况下，.person 不能是链接，因为它包含电子邮件链接。）

所以在这种情况下它不起作用。如果我单击 .person 中的 .name，则目标是 .name。

这似乎是一些基本的东西，但我却没有想到。JavaScript 中处理这个问题的典型方法是什么？

我试图通过“元素”类获取所有元素，并向每个元素添加一个事件侦听器。然而，getElementsByClassName()返回和html集合。当我使用.length()它时它等于零。如何迭代此集合以便向此类中的每个元素添加事件侦听器？有没有办法将这个 html 集合转换为数组？这是我到目前为止所拥有的：

var tableElements = document.getElementsByClassName("element");
console.log(tableElements);
console.log(tableElements.length);

for(var i=0;i<tableElements.length;i++){
   tableElements[i].addEventListener("click", dispElementData(this));
} //doesnt work

我创建了一个 HTML 表格，如下所示。我需要在每个产品的价格后面添加一个按钮。我怎样才能使用 JAVASCRIPT 来做到这一点？（例如：假设表有超过 20 行。我需要在每一行中都有一个按钮）

<table id="productTable" class="table table-bordered table-condensed table-striped">
    <thead>
        <tr>
            <th>Product Name</th>
            <th>Description</th>
            <th>Price</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th>Soap</th>
            <th>good for babies</th>
            <th>75</th>
        </tr>

        <tr>
            <th>Milk</th>
            <th>manufactured</th>
            <th>100</th>
        </tr>

        <tr>
            <th>Rice</th>
            <th>red rice 1kg pack</th>
            <th>130</th>
        </tr>
    </tbody>
</table>