Question

我的结构如下

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

并创建了如下的javascript函数并尝试获取当前元素但未获取

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

Answer 1

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

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

然后在jquery的帮助下，你可以用比现在更好的方式处理它：

$('li').click(function() {
    var $this = $(this);

    var url = $this.data('url'),
        name = $this.data('name');
});

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

Answer 2

将this作为参数传递给函数

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

的javascript

 function CheckSiteAvailabilty( obj, website, message) {
  console.log(obj)
}

或者使用jquery。

您需要根据HTML
使用选择器

$(document).ready(function(){
   $('ul li').on('click',function(){
    console.log($(this));
   });
});

Answer 3

您应该将其作为函数参数

传递

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

Answer 4

这是另一种方法，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>

此处数据通过事件传递。

Answer 5

请参阅jsfiddle http://jsfiddle.net/j5ougwoq/1/

而不是像<li onclick="CheckSiteAvailabilty那样写点击给li元素一些类说class="checkIt"并添加如下脚本，将this作为函数参数传递

$(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

}
});

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

5 个答案: