Javascript:使用.click方法时出现问题

Javascript: Issue when using .click method

本文关键字：问题 方法 使用 click Javascript      更新时间：2023-09-26

首先这里是与代码

对应的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的点击。这是测试当我点击任何链接innerHTML在所有div被执行…我完全不知道为什么会这样，非常感谢您的帮助

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

<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/

当您说nyView.click时，您指的是函数定义，并且始终将其视为true值，因此您将始终获得第一个条件。

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

我的方法非常不同，也许其他人可以用你的逻辑工作。我不能。我的方法:

<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");
})

在所有li中添加一个常见的类，如.category，并获得index()

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

小提琴

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>
相关文章：