CODEWITHSUNDEEP
javascriptjquery
vimal
vimal

Reputation: 75

Getting href value on click

I have 6 links. When i click on any link i get only the first id value

var hrefValue = '';
$(".info_link").click(function () {
     hrefValue = $(this).attr("id");
    console.log('hrefValue : '+hrefValue);
});

Upvotes: 0

Views: 3312

Answers (6)

Bunty
Bunty

Reputation: 1593

You need to go through loop. Check with jQuery each.

$(".info_link").each(function () {
     $(this).click(function (){
         hrefValue = $(this).attr("id");
         console.log('hrefValue : '+hrefValue);
     });
});

Upvotes: 1

josephting
josephting

Reputation: 2665

Not exactly sure what you're trying to do here but this is how you can get all the href and id of .info_link.

If HTML sample is given, the Javascript code can be optimized for your use case. It is unfortunately unavailable so I have to make assumption on this part.

var txngg = function () {
};
(function($, window, document) {
  $('#tgg').on('click', '.info_link', function() {
    var values = [];
    $(this).parent().find('.info_link').each(function(i, e) {
      var $e = $(e);
      values.push({
        "href": $e.attr('href'),
        "id": $e.attr('id')
      });
    });
    console.log(values);
    return false;
  });
})(jQuery, window, document);
#tgg a { display: block; line-height: 150%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tgg">
	<a href="#a" class="info_link" data-toggle="collapse" id="a" data-target="#tuthtstory" onclick="txngg()" title="Click to view Validation Result">a</a>
	<a href="#b" class="info_link" data-toggle="collapse" id="b" data-target="#tuthtstory" onclick="txngg()" title="Click to view Validation Result">b</a>
	<a href="#c" class="info_link" data-toggle="collapse" id="c" data-target="#tuthtstory" onclick="txngg()" title="Click to view Validation Result">c</a>
	<a href="#d" class="info_link" data-toggle="collapse" id="d" data-target="#tuthtstory" onclick="txngg()" title="Click to view Validation Result">d</a>
	<a href="#e" class="info_link" data-toggle="collapse" id="e" data-target="#tuthtstory" onclick="txngg()" title="Click to view Validation Result">e</a>
	<a href="#f" class="info_link" data-toggle="collapse" id="f" data-target="#tuthtstory" onclick="txngg()" title="Click to view Validation Result">f</a>
</div>

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

To get the href/id value of a link you do the following:

$('#tgg').on('click','.info_link',function(e) {
  e.preventDefault();
  var hrefValue = this.href;//get the href property of the current clicked element
  var id = this.id;//get the id property of the current clicked element
  console.log('hrefValue : ' + hrefValue, 'id:' + id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tgg"><a class="info_link" id="unique_id" href="http://google.com ">google</a></div>

if you want all the ids/hrefs of a particular set of elements then you need a global array variable where you push the id/href of the clicked element

var id = [];

$(".info_link").click(function() {
  id.push(this.id);
  console.log('ids : ' + id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="info_link" id="q">0</a>
<a class="info_link" id="q1">1</a>
<a class="info_link" id="q2">2</a>
<a class="info_link" id="q3">3</a>
<a class="info_link" id="q4">4</a>

note: you need to delegate your click event if you append the links dynamically

Upvotes: 4

Khan Shahrukh
Khan Shahrukh

Reputation: 6361

If I understood your question correctly here is a solution : 

<a href="http://example.com" data-value="something" id="same_id_for_all_urls">Click me </a>

$('#same_id_for_all_urls').click(function(e)
{
    e.preventDefault();
    var valueOfLink = $(this).data('value');
    console.log(valueOfLink);
})

Upvotes: 0

Nishant Saini
Nishant Saini

Reputation: 431

Use below code and dont forget to include jquery library

<script>
  $(document).ready(function(){
        $(".test").click(function(evt){
       var hrefValue = $(this).attr("id");
        console.log('hrefValue : '+hrefValue);

        });
     });
</script>
<div class="test" id="testDiv1">div1</div>
<div class="test" id="testDiv2">div2</div>
<div class="test" id="testDiv3">div2</div>
<div class="test" id="testDiv4">div2</div>strong text
<div class="test" id="testDiv5">div2</div>

Upvotes: 0

guradio
guradio

Reputation: 15555

$(".info_link").click(function () {
     var hrefValue = $(this).attr("id");
    console.log('hrefValue : '+hrefValue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="info_link" id="q">asd</a>
<a class="info_link" id="q1">asd</a>
<a class="info_link" id="q2">asd</a>
<a class="info_link" id="q3">asd</a>
<a class="info_link" id="q4">asd</a>

Put the initialization of var hrefValue = $(this).attr("id"); inside click

Upvotes: 0

Related Questions