Javascript：使用 .click 方法时出现问题答案

【问题标题】：Javascript: Issue when using .click methodJavascript：使用 .click 方法时出现问题
【发布时间】：2015-06-09 13:54:20
【问题描述】：

这里首先是与代码对应的html

<div class="grid_12">
    <ul id="categories">
        <li class="filter">Categories:</li>
        <li id="ny"><a href="#newYork" onclick="getImageCategories()"> New York</a></li>
        <li id="sc"><a href="#spanishCities" onclick="getImageCategories()">Spanish Cities</a></li>
        <li id="gv"><a href="#aGlasgowViewpoint" onclick="getImageCategories()">A Glasgow Viewpoint</a></li>
        <li id="sch"><a href="#someChurches" onclick="getImageCategories()">Some Churches</a></li>
        <li id="bh"><a href="#barcelonaHighlights" onclick="getImageCategories()">Barcelona Highlights</a></li>
        <li id="mp"><a href="#martin's Pictures" onclick="getImageCategories()">Martin’s Pictures</a></li>
    </ul>
</div>
<!-- end .grid_12 - CATEGORIES -->

这里的想法是，当这些链接中的每一个被按下时，var id 会根据被点击的内容更改为正确的数字

这是我用来执行此操作的代码

if (nyView.click) {
    id = 1;
} else if (scView.click) {
    id = 2;
} else if (gvView.click) {
    id = 3;
} else if (schView.click) {
    id = 4;
} else if (bhView.click) {
    id = 5;
} else if (mpView.click) {
    id = 6;
}

视图变量只是查找正确 div 元素的定位器，因此它们是这样完成的

 nyView = document.getElementById('ny');
      scView = document.getElementById('sc');
      gvView = document.getElementById('gv');
      schView = document.getElementById('sch');
      bhView = document.getElementById('bh');
      mpView = document.getElementById('mp');

我的问题是，无论我点击哪个元素，我都只会得到原始元素......对我来说，代码似乎将它们全部组合在一起，所以当你点击 ny 链接时，它会在点击所有其他 div 时使用它。这已经过测试，因为当我单击所有 div 中的 ny 链接 innerHTML 已执行...我完全不知道为什么会这样，非常感谢您的帮助

【问题讨论】：

我在你的 JavaScript 中没有看到 getImageCategories()，但它在你的元素中是内联的？
onclick="getImageCategories(this)" 元素会自动传递。
这是函数名...我只是没有放入我发布的代码段
您希望 .click 属性做什么？因为 HTMLElement 上没有这样的属性...
我认为它会在点击特定元素时记录下来

标签： javascript jquery html css

【解决方案1】：

您不需要内联事件处理程序
您可以使用event delegation
使用index获取ul中被点击的元素索引

HTML

<div class="grid_12">
    <ul id="categories">
        <li class="filter">Categories:</li>
        <li id="ny"><a href="#newYork"> New York</a>
        </li>
        <li id="sc"><a href="#spanishCities">Spanish Cities</a>
        </li>
        <li id="gv"><a href="#aGlasgowViewpoint">A Glasgow Viewpoint</a>
        </li>
        <li id="sch"><a href="#someChurches">Some Churches</a>
        </li>
        <li id="bh"><a href="#barcelonaHighlights">Barcelona Highlights</a>
        </li>
        <li id="mp"><a href="#martin's Pictures">Martin’s Pictures</a>
        </li>
    </ul>
</div>

Javascript

var id;
$('#categories').on('click', 'li>a', function () {
    id = $(this).closest('li').index();
});

演示：http://jsfiddle.net/tusharj/q9xbqck0/3/

【讨论】：

@Tushar 如何更改警报部分以添加到实际变量中？
@Tushar 非常感谢

【解决方案2】：

当您说nyView.click 时，您指的是函数定义，它始终被视为true 值，因此您始终会得到第一个条件。

var id;
$('#categories').on('click', 'li', function(){
    id = this.id; // id = $(this).index();
});

【讨论】：

【解决方案3】：

我的方法很不一样，也许其他人可以按照你的逻辑工作。我不能。我的做法：

<div class="grid_12">
<ul id="categories">
    <li class="filter">Categories:</li>
    <li class="licategory" data-val="ny" data-id="1"><a href="#newYork" onclick="getImageCategories()"> New York</a></li>
    <li class="licategory" data-val="sc" data-id="1"><a href="#spanishCities" onclick="getImageCategories()">Spanish Cities</a></li>
    <li class="licategory" data-val="gv" data-id="1"><a href="#aGlasgowViewpoint" onclick="getImageCategories()">A Glasgow Viewpoint</a></li>
    <li class="licategory" data-val="sch data-id="1""><a href="#someChurches" onclick="getImageCategories()">Some Churches</a></li>
    <li class="licategory" data-val="bh" data-id="1"><a href="#barcelonaHighlights" onclick="getImageCategories()">Barcelona Highlights</a></li>
    <li class="licategory" data-val="mp" data-id="1"><a href="#martin's Pictures" onclick="getImageCategories()">Martin’s Pictures</a></li>
</ul>

$("li").on("click",function(){
    $("this").data("val");
    $("this").data("id");
})

【讨论】：

我已经使用了这种方法，但没有成功，但还是谢谢你。抱歉，如果我的逻辑难以理解，我在这方面的经验很少

【解决方案4】：

在所有li中添加一个像.category这样的通用类并获取index()

$(".category").click(function(){
   // console.log(this.id);
    alert($(this).index())
});

Fiddle

【讨论】：

【解决方案5】：

nyView.click 返回一个函数，这就是为什么无论您点击哪个链接，id =1 的值总是......试试这个代码

    <!doctype html>
<html>
    <head>
        <script>
            function getImageCategories(element) {
                var nyView = document.getElementById('ny');
                 var     scView = document.getElementById('sc');
                 var     gvView = document.getElementById('gv');
                 var     schView = document.getElementById('sch');
                 var     bhView = document.getElementById('bh');
                 var     mpView = document.getElementById('mp');
                var id=0;



                if (element.parentNode === (nyView)) {
                    id = 1;
                } else if (element.parentNode===scView) {
                    id = 2;
                } else if (element.parentNode===gvView) {
                    id = 3;
                } else if (element.parentNode===schView) {
                    id = 4;
                } else if (element.parentNode===bhView) {
                    id = 5;
                } else if (element.parentNode===mpView) {
                    id = 6;
                }
                alert(id);

            }
        </script>
    </head>
    <body>
        <div class="grid_12">
    <ul id="categories">
        <li class="filter">Categories:</li>
        <li id="ny"><a href="#newYork" onclick="getImageCategories(this)"> New York</a></li>
        <li id="sc"><a href="#spanishCities" onclick="getImageCategories(this)">Spanish Cities</a></li>
        <li id="gv"><a href="#aGlasgowViewpoint" onclick="getImageCategories(this)">A Glasgow Viewpoint</a></li>
        <li id="sch"><a href="#someChurches" onclick="getImageCategories(this)">Some Churches</a></li>
        <li id="bh"><a href="#barcelonaHighlights" onclick="getImageCategories(this)">Barcelona Highlights</a></li>
        <li id="mp"><a href="#martin's Pictures" onclick="getImageCategories(this)">Martin’s Pictures</a></li>
    </ul>
</div>
    </body>
</html>

【讨论】：