Javascript onclick事件jQuery中的当前元素引用_Javascript_Jquery

Javascript onclick事件jQuery中的当前元素引用

javascript jquery

Javascript onclick事件jQuery中的当前元素引用,javascript,jquery,Javascript,Jquery,我有一个如下的结构 <ul> <li onclick="CheckSiteAvailabilty('http://aajtak.intoday.in/','Aaj Tak')"> <a class="btn-App1" href="#"> <img src="../images/ImgVer6/Aaj Tak.png" /> </a> <a class="btn-Ap

我有一个如下的结构

<ul>
    <li onclick="CheckSiteAvailabilty('http://aajtak.intoday.in/','Aaj Tak')">
      <a class="btn-App1" href="#">
          <img src="../images/ImgVer6/Aaj Tak.png" />
      </a>
      <a class="btn-App2 " href="#">
    <div>
         Aaj Tak
    </div>
    </a>
  </li>
 ...................
</ul>

将此作为参数传递给函数

 <li onclick="CheckSiteAvailabilty(this,'http://aajtak.intoday.in/','Aaj Tak')">

或者使用jquery

您需要根据HTML使用选择器

将此作为参数传递给函数

 <li onclick="CheckSiteAvailabilty(this,'http://aajtak.intoday.in/','Aaj Tak')">

或者使用jquery

您需要根据HTML使用选择器

您应该将其作为函数参数传递

<ul>
    <li onclick="CheckSiteAvailabilty('http://aajtak.intoday.in/','Aaj Tak', this)">
      <a class="btn-App1" href="#">
          <img src="../images/ImgVer6/Aaj Tak.png" />
      </a>
      <a class="btn-App2 " href="#">
    <div>
         Aaj Tak
    </div>
    </a>
  </li>
 ...................
</ul>

function CheckSiteAvailabilty(website, message, element) {
  alert(element);
  //$(this) change the current element ie li css
}

$(document).ready(function() {
    $('.checkIt').click( function() {
        CheckSiteAvailabilty('http://aajtak.intoday.in/','Aaj Tak', this)
    });

    function CheckSiteAvailabilty(website, message, div) {
  //$(this) change the current element ie li css
        alert(website);
        alert(message);
        $(div).addClass('red'); // or whichever class you add for css

}
});




...................

功能检查站点可用性（网站、消息、元素）{
警报（要素）；
//$（这）更改当前元素ie li css
}

您应该将其作为函数参数传递

<ul>
    <li onclick="CheckSiteAvailabilty('http://aajtak.intoday.in/','Aaj Tak', this)">
      <a class="btn-App1" href="#">
          <img src="../images/ImgVer6/Aaj Tak.png" />
      </a>
      <a class="btn-App2 " href="#">
    <div>
         Aaj Tak
    </div>
    </a>
  </li>
 ...................
</ul>

function CheckSiteAvailabilty(website, message, element) {
  alert(element);
  //$(this) change the current element ie li css
}

$(document).ready(function() {
    $('.checkIt').click( function() {
        CheckSiteAvailabilty('http://aajtak.intoday.in/','Aaj Tak', this)
    });

    function CheckSiteAvailabilty(website, message, div) {
  //$(this) change the current element ie li css
        alert(website);
        alert(message);
        $(div).addClass('red'); // or whichever class you add for css

}
});




...................

功能检查站点可用性（网站、消息、元素）{
警报（要素）；
//$（这）更改当前元素ie li css
}

反转流-以声明方式将数据设置为元素属性：

<ul>
    <li data-url="http://aajtak.intoday.in/" data-name="Aaj Tak">
      <a class="btn-App1" href="#">
          <img src="../images/ImgVer6/Aaj Tak.png" />
      </a>
      <a class="btn-App2 " href="#">
    <div>
         Aaj Tak
    </div>
    </a>
  </li>
 ...................
</ul>

PS：如果页面上有多个列表，您将使用类选择器而不是

li

。

反转流-以声明方式将数据设置为元素属性：

<ul>
    <li data-url="http://aajtak.intoday.in/" data-name="Aaj Tak">
      <a class="btn-App1" href="#">
          <img src="../images/ImgVer6/Aaj Tak.png" />
      </a>
      <a class="btn-App2 " href="#">
    <div>
         Aaj Tak
    </div>
    </a>
  </li>
 ...................
</ul>

PS：如果页面上有多个列表，您可以使用类选择器而不是

li

。

这里是另一种方法，HTML:

<body>

<ul>
    <li>
      <a class="btn-App1" href="#">
          <img src="../images/ImgVer6/Aaj Tak.png" />
      </a>
      <a class="btn-App2 " href="#">
    <div>
         Aaj Tak
    </div>
    </a>
  </li>
 ...................
</ul>

</body>





...................

脚本将如下所示：

<script>
$(document).ready(function(){
    $("li").click({url:"http://aajtak.intoday.in/", name: "Aaj Tak"}, CheckSiteAvailabilty);
});

function CheckSiteAvailabilty(event){ 
   alert(event.data.url);
   alert(event.data.name);
}

</script>


$（文档）.ready（函数（）{
$（“li”）。单击（{url:http://aajtak.intoday.in/，名称：“Aaj Tak”}，检查站点可用性）；
});
函数CheckSiteAvailability（事件）{
警报（event.data.url）；
警报（event.data.name）；
}

这里数据通过事件传递。

这里是另一种方法，HTML：

<body>

<ul>
    <li>
      <a class="btn-App1" href="#">
          <img src="../images/ImgVer6/Aaj Tak.png" />
      </a>
      <a class="btn-App2 " href="#">
    <div>
         Aaj Tak
    </div>
    </a>
  </li>
 ...................
</ul>

</body>





...................

脚本将如下所示：

<script>
$(document).ready(function(){
    $("li").click({url:"http://aajtak.intoday.in/", name: "Aaj Tak"}, CheckSiteAvailabilty);
});

function CheckSiteAvailabilty(event){ 
   alert(event.data.url);
   alert(event.data.name);
}

</script>


$（文档）.ready（函数（）{
$（“li”）。单击（{url:http://aajtak.intoday.in/，名称：“Aaj Tak”}，检查站点可用性）；
});
函数CheckSiteAvailability（事件）{
警报（event.data.url）；
警报（event.data.name）；
}

这里数据通过事件传递。

请参考JSFIDLE

请参考jsfiddle，而不是在

上编写click as
不要在上编写click as，而是使用jquery工具侦听事件：@zerkms我知道，但我想在click事件中传递两个参数。在这种情况下，我认为我无法传递参数。还是我错了@शेखर: 通过data-
attributes传递它们使用jquery工具侦听事件：@zerkms我知道，但我想在click事件中传递两个参数。在这种情况下，我认为我无法传递参数。还是我错了@शेखर: 通过data-
attributes传递它们No该li没有任何ID。因此this.ID
将无效。No该li没有任何ID。因此this.ID
将无效。这是最合适的答案。再次查询此数据url
和数据名称
是否存在浏览器兼容性问题？它能在像ie6这样的浏览器上工作吗@शेखर 这些只是元素属性-您不需要对它们提供任何特殊支持*，所有工作都是由jquery完成的。这是最合适的答案。再查询一次此数据url
和数据名称
是否存在浏览器兼容性问题？它能在像ie6这样的浏览器上工作吗@शेखर 这些只是元素属性——您不需要对它们提供任何特殊支持*，所有工作都是由jquery完成的。