jQuery check click for each link - javascript

$("#showKey").each(
$(this).click(function(){
alert($(this).attr("value"));
})
);
And
<a id="showKey" href="#" value="{{ customer.key }}">
<span class="icons icon-key"></span>
Show key
</a>
The alert gives and undefined output, just 'undefined'. I have a list of customers and a click on #showKey should reveal the key for the clicked customer.
Whats wrong with my code?

You cannot have multiple elements with the same ID - use a class instead. Additionally, you don't need the call to .each -- use a class selector instead:
$(".showKey").click(function(){
alert($(this).data("key"));
);
<a class="showKey" href="#" data-key="{{ customer.key }}">Show key</a>

you can use data attribute:
<a id="showKey" href="#" data-value="{{ customer.key }}">
<span class="icons icon-key"></span>
Show key
</a>
$("#showKey").click(function(){
alert($(this).data("value"));
})
http://jsfiddle.net/LKArX/

You do not need the jQuery each function.
$("#showKey").click(function(){
alert($(this).attr("value"));
});

The problem with your code is in your usage of
$("#showkey").each({...});
You should simply use
$("#showkey").click({function(){
alert( $this).val() );
}
});
to bind the click event to every showkey id'd element.

Related

js trigger click on a based on children element id

I want to trigger the click on a tag which has div with id='a'.
$(document).ready(function() {
$("#chat_list_content a:has(div[id='a'])").click();
//$("#chat_list_content a:has(div[id='a'])").trigger("click");
$('#chat_list_content a').click(function() {
alert('you are here');
})
})
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div id="chat_list_content">
<a href="#">
<div id="a">A</div>
</a>
<a href="#">
<div id="b">B</div>
</a>
</div>
Click should happen automatically and output alert box. But, there is no respond from the code.
Thanks in advance.
When you call $("#chat_list_content a:has(div[id='a'])").click(), the custom click handler is not yet described yet. That means it doesn't do anything. You just need to move the click trigger below the click function definition:
$(document).ready(function() {
//$("#chat_list_content a:has(div[id='a'])").trigger("click");
$("#chat_list_content a").click(function() {
alert("you are here");
});
// Make sure to add this after the click handler definition above
$("#chat_list_content a:has(div[id='a'])").click();
});
working sandbox: https://codesandbox.io/s/exciting-gagarin-t55er
There is no need to use :has() here at all, you can simply use Attribute Equals Selector [name="value"] to achieve what you are looking for.
$(document).ready(function(){
$('#chat_list_content a').click(function(){
alert('you are here at '+ $(this).index());
});
$('#chat_list_content a div[id=a]').click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chat_list_content">
<a href="#">
<div id="a">A</div>
</a>
<a href="#">
<div id="b">B</div>
</a>
</div>

Display all the data along with the image/icon when list is clicked

Above is the dropdown that when list is clicked, its value will be displayed in the field above (which is a button btw) together with the image. I've already achieved displaying the text but I cannot seem to display the image. This is my markup below...
<button type="button" onclick="showbanks(); return false;" name="button" class="banknam btn dropdown-toggle center-right glyph form-control d-inline-block" data-toggle="dropdown-menu" aria-haspopup="true" aria-expanded="false">广东</button>
<ul class="dropdown-menu menu-banknam">
#foreach (array_slice($chosen_bank,0,5) as $index =>$bank)
<li value="{{$bank}}" onclick="clickbanks(); return false;">
<span class="bankimg d-inline-block"><img src="{{ asset($chosen_bankimg[$index]) }}" alt=""></span>
<span class="bank_nam d-inline-block">{{ $bank }}</span>
</li>
#endforeach
</ul>
...and my function...
function clickbanks(){
$(".menu-banknam li").click(function(){
$(this).parents(".bb-container").find('.banknam').html($(this).text());
return false;
});
}
Is there any way to achieve this? Thank you.
Use .html() instead of .text() to get the entire content of the li instead of just the text.
e.g.
$(this).parents(".bb-container").find('.banknam').html($(this).html());
You are also assigning a new click event to the li each time you click on it.
You should remove the clickbanks function and instead assign the click event once when the document is ready. You'll also have to remove it from the onclick attribute of the li.
e.g.
$(function() {
$(".menu-banknam li").click(function() {
$(this).parents(".bb-container").find('.banknam').html($(this).text());
return false;
});
});

Remove and Add class is not working in jquery

What do I need:
I need to have something like "toggling of images" using the functions to add & remove classes in jquery.
JavaScript code
$('.hover12').click(function () {
$('.fa-star-o').removeClass('fa-star-o').addClass('fa-star orange12');
});
HTML code
<a href="javascript:void(0);" class="hover12">
<i class="fa fa-star-o favourate_dextop" title="Add to Favorites" id="fav13039" data-sess_id="13039" data-name="MAGIC" data-city="Las Vegas" data-country="United States Of America" data-event_url="magic"></i>
</a>
Problem:
On the first click, remove class works fine and add class to that particular class.
Then I have a problem on the second click, neither remove or add class works.
o/p on first toggle
<i class="fa favourate_dextop fa-star orange12" title="Add to Favorites" id="fav13039" data-sess_id="13039" data-name="MAGIC" data-city="Las Vegas" data-country="United States Of America" data-event_url="magic"></i>
The solution I found:
$('.hover12').click(function () {
$('.fa-star').removeClass('fa-star orange12').addClass('fa-star-o');
});
Change this
$('.fa-star-o').RemoveClass...
to this
$(this).find('i').RemoveClass...
try this:
$('.hover12').click(function()
{
$(this).find('.fa').toggleClass('fa-star-o').toggleClass('fa-star orange12');
});
The selector fails for .fa-star-o class the second time because there is no class like that since it was removed on the first click.
$('.hover12').click(function(e){
e.preventDefault();
if($('.hover12 i').hasClass('fa-star-o')){
$('.fa-star-o').removeClass('fa-star-o').addClass('fa-star orange12');
}else if($('.hover12 i').hasClass('fa-star'){
$('.fa-star-o').removeClass('fa-star orange12').addClass('fa-star-o');
}
});
This is one ugly solution though!

Jquery Show Hide with attribute

How to get value from custom attribute to be used in if else condition?
I want to switch button between show & hide . if show button clicked it will hiden and the hide button showed. And also the same for opposites.
So i can do show hide for my divs.
Here's my codes
<div class="wrapper">
<a class="show_detail" target="1" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="1" style="display:none">- Hide</a>
<div class="event_down" id="event_down1" style="display:none">
Content 1
</div>
<a class="show_detail" target="2" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="2" style="display:none">- Hide</a>
<div class="event_down" id="event_down2" style="display:none">
Content 2
</div>
<a class="show_detail" target="3" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="3" style="display:none">- Hide</a>
<div class="event_down" id="event_down3" style="display:none">
Content 3
</div>
</div>
CSS:
.show_detail{cursor:pointer; color:red;}
.hide_detail{cursor:pointer; color:red;}
JS :
$('.show_detail').click(function(){
var atribut_show = $('.show_detail').attr('target');
var atribut_hide = $('.hide_detail').attr('target-hide');
if (atribut_show == atribut_hide){
$('.hide_detail').show();
$(this).hide();
}
$('.event_down').hide();
$('#event_down'+$(this).attr('target')).show();
});
and here's MY FIDDLE need your help to solve it.
in order to get custom attributes their name must start with "data-". For example your custom attribute target would be "data-target". After that you can get them using something like $("#myElement").getAttribute("data-target").
You are getting object array list you have to get only the current object
Check updated fiddle here
"http://jsfiddle.net/p7Krf/3/"
$('.show_detail').click(function(){
var atribut_show = $(this).attr('target');
$('.hide_detail').each(function(element){
if($(this).attr("target-hide")==atribut_show){
$(this).show();
}
});
$(this).hide();
$('#event_down'+atribut_show).show();
});
The following javascript made it function for me. You should however consider calling your attributes data-target and data-target-hide as your specified attributes are not actually valid. It will function, but you could run into problems if you don't change the attribute names.
$('.show_detail').click(function(){
var atribut_show = $(this).attr('target');
$('.hide_detail[target-hide="'+atribut_show+'"]').show();
$(this).hide();
$('#event_down'+atribut_show).show();
});
$('.hide_detail').click(function(){
var atribut_hide = $(this).attr('target-hide');
$('.show_detail[target="'+atribut_hide+'"]').show();
$(this).hide();
$('#event_down'+atribut_hide).hide();
});

get data value of tag from click event in html

this is my code snippest.
<div class="pagination pagination-0" style="-moz-user-select: none;">
<a class="jp-previous jp-disabled">«</a>
<a class="jp-current">1</a>
<span class="jp-hidden">...</span>
<a class="">2</a>
<a class="jp-next">»</a></div>
from this code i want fetch value of
<a class="jp-current">
through jquery. please note, id is restricted to use with it.
Try this:
$(".jp-current").on("click", function () {
console.log($(this).text());
})
http://jsfiddle.net/U6mBQ/
And if you don't need that just on click:
console.log($(".jp-current").text());
var val = $(".jp-current").first().text();
Use
$(".jp-current").click(function () {
console.log(this.innerHTML); // or this.textContent
})
References
.textContent
.innerHTML
class-selector

Categories