Question

这里的第一个是与代码

对应的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被点击。这是测试，当我点击所有divs中的ny链接innerHTML被执行...我完全被困在为什么这是如此将非常感谢帮助

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

Answer 2

如果你说nyView.click你指的是函数定义并且总是被视为true值，那么你总会得到第一个条件。

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

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

Answer 4

在所有li中添加一个像.category这样的公共类，并获取index（）

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

<强> Fiddle

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

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

5 个答案: