无法获取点击的元素

问题描述：

<div class="ribbon-fav" id="fav_id"> 
      <%- if user_signed_in? %> 
        <%- unless current_user.favorite_texts.exists?(id: text.id) -%> 
          <%= link_to image_tag("fav-hrt.png", size: "20x18", alt: "Add Favorite", title: " Add Favorite "), :id => 'fav_id_002' %> 
        <%- else -%> 
          <%= link_to image_tag("favd-hrt.png", size: "20x18", alt: "Remove from Favorites", title: " Remove from Favorites "), :id => 'fav_id_001' %> 
        <%- end -%> 
      <%- else -%> 
        <%= link_to image_tag("fav-hrt.png", size: "20x18", alt: "Add Favorite", title: " Add Favorite "), favorite_texts_path(text_id: text.id), method: :post, :'data-turbolinks-action' => 'replace' %> 
      <%- end -%>

下面是JavaScript

console.log("favorite_add_remove.js loaded"); 

$(document).ready(function(){ 
    console.log("called function"); 
    $("#fav_id a").on("click", function(e) { 
     e.preventDefault(); 
     //var value = $(this).val(); 
     console.log(e.target.id); 
     //console.log(value); 
    }); 
    //f1(); 
})

我无法获得链接的ID或价值点击。我如何获得点击元素的ID？请帮忙，谢谢。

你试过'e.target.id'吗？你在另一个函数里调用函数，这是不好的。在'f1（）'以外的点击事件' –

添加呈现的html也 –

无需编写函数'f1（）'。把所有的代码放在那里。 – Harish

答

请看小提琴的例子。这可能帮助你

$(document).ready(function(){ 
 
\t $(".test").click(function(){ 
 
    var clickedId = this.id; 
 
    alert(this.id); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="surya1" class="test">asda</a> 
 
<a href="#" id="surya2" class="test">asd</a> 
 
<a href="#" id="surya3" class="test">asdasd</a>

https://jsfiddle.net/hu7r7hsu/

所有你需要做的是设置在同一类的所有锚标签，使之共同之后遵循下面的代码的例子。

$(".linkClass").on("click", function() { 
    var clickedId = this.id; 
}

建议的方式不起作用。因为我们试图点击的链接在if子句中。我不确定，但很可能我们无法直接选择。 –

答

试试这个代码：

$('#fav_id').on('click', 'a', function(){ 
    console.log($(this).attr('id')); 
});

它给'udefined'。 if语句必须要做些什么？导致我们尝试点击的链接位于if子句中。 –

你可以添加呈现的html吗？ –

看到这个：https：//jsfiddle.net/pqkazu2b/ –

答

这使得它的工作，不得不改变一点点的HTML。

<div class="ribbon-fav" id="fav_id"> 
      <%- if user_signed_in? %> 
        <%- unless current_user.favorite_texts.exists?(id: text.id) -%> 
          <%= link_to image_tag("fav-hrt.png", size: "20x18", alt: "Add Favorite", title: " Add Favorite ", :id => 'fav_id_002') %> 
        <%- else -%> 
          <%= link_to image_tag("favd-hrt.png", size: "20x18", alt: "Remove from Favorites", title: " Remove from Favorites ", :id => 'fav_id_001') %> 
        <%- end -%> 
      <%- else -%> 
        <%= link_to image_tag("fav-hrt.png", size: "20x18", alt: "Add Favorite", title: " Add Favorite "), favorite_texts_path(text_id: text.id), method: :post, :'data-turbolinks-action' => 'replace' %> 
      <%- end -%> 
     </div>

从链接标签删除了id并把它添加到img标签。

和JavaScript如下：

console.log("favorite_add_remove.js loaded"); 

$(document).ready(function(){ 
    console.log("called function"); 
    $("#fav_id a").on("click", function(e) { 
     e.preventDefault(); 
     var imgIdVal = $('img', this).attr('id'); 
     console.log(imgIdVal); 
    }); 
})

这给了输出fav_id_002;

无法获取点击的元素

相关推荐