Javascript:使用时出现问题。单击方法_Javascript_Jquery_Html_Css

Javascript:使用时出现问题。单击方法

javascript jquery html css

Javascript:使用时出现问题。单击方法,javascript,jquery,html,css,Javascript,Jquery,Html,Css,首先，这里是与代码对应的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>

首先，这里是与代码对应的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 -->

视图变量只是用于查找正确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');

我的问题是，无论我点击了什么元素，我都只能得到原始的。。。对我来说，这似乎是所有的代码组在一起，所以当你点击纽约链接时，它会采取这一点，因为所有其他div都被点击。当我在所有div中单击ny链接innerHTML时，这是经过测试的。。。我完全无法理解为什么会这样。我非常感谢您的帮助

您不需要内联事件处理程序

您可以使用

事件委派

使用

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>

演示：

当你说

nyView时。单击

你指的是函数定义，它总是被视为

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中添加一个公共类，如

.category

，并获取索引（）

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>


函数getImageCategories（元素）{
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；
}
警报（id）；
}

类别：

我在JavaScript中没有看到

getImageCategories（）

，但它在元素中是内联的？

onclick=“getImageCategories（this）”

元素将自动传递。这是函数名。。。我只是没有输入我发布的代码段。单击属性可以做什么？因为HtmleElement上没有这样的属性…我假设在单击特定元素时会注意到我使用了这种方法，但没有获得任何成功，但无论如何，谢谢你。抱歉，如果我的逻辑难以理解，我在这方面没有什么经验this@Tushar如何更改警报部分以添加到实际变量？@Tushar非常感谢

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

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

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