<div class='fixed_button homes hidden'>
<a class='btn btn-primary homes'>Continue →</a>
</div>
jQuery
$(".homes").on('click', function(){
$("choose_style").addClass('hidden');
$("choose_town").removeClass('hidden');
});
I need the .choose_town div to show and the .choose_style div to hide when I click the button.
Nothing happens when the button gets clicked though.
Don't forget the .
$(".choose_style").addClass('hidden');
$(".choose_town").removeClass('hidden');
You forgot the '.' (for a class) or '#' (for an Id)
Check it $(".class") or it $("#id")
$(".choose_style").addClass('hidden');
$(".choose_town").removeClass('hidden');
It looks like your $("choose_style") and $("choose_town") are missing . or #
It is very simple by jQuery and Love this method:
$("id").addClass('class');
$("id").removeClass('class');
just place and understand these classes functionality what you want to do.
Related
Let's say that I got code like that:
<div class="div">
<input type="submit" value="Button" class="button1">
</div>
And then when I put in the console this code:
document.getElemetsByClassName('button1')[0].click();
It does click the button, but when I try the same thing in jQuery with arrays:
array = document.getElementsByClassName('div');
$(array[0]).find('button1').click();
It does not work and does not return any error messages so I don't know what is wrong. Thanks from above for help.
button1 is class. You should add a dot(.) before button1 to select button1 class like following.
$(array[0]).find('.button1').click();
The selector you are using is a tag selector. Change it to class selector:
$(array[0]).find('.button1').click();
//----------------^ Add a . here.
I would also better change this to:
$(".div .button1").trigger("click");
Works better this way, using trigger().
I have
echo '<div><span>'.$wiersz['data'].'<i> added by: '.$wiersz['username'].'</i></span><span>Rate: </span><i **FROM HERE**>'.$wiersz['likes'].'</i><i>'.$wiersz['unlikes'].'</i></div>';
echo '<div><span>'.$wiersz['data'].'<i> added by: '.$wiersz['username'].'</i></span><span>Rate: <i>Thank you</i></span><i **OVERHERE**>'.$wiersz['likes'].'</i> <i>'.$wiersz['unlikes'].'</i></div>';
How Can I go FROM (FROM HERE) to the (OVER HERE) by selectors in jQuery?
I'm hiding first div and showing second div. I need to increase innerText of OVERHERE but I dont know how to go there by selectors.
I did:
$(this).parent().next()
this lead me to second div but still cant go into OVERHERE in second div.
try this..
$(this).parent().next().children()[2]
Assuming this is how the rendered HTML looks like
<div>
<span>data<i> added by: username</i></span>
<span>Rate: </span>
<i onclick="$(this).closest('div').next().find('i').eq(2).text(parseInt($(this).text(),10))">25 Likes</i>
<i>unlikes</i>
</div>
<div>
<span>data<i> added by: username</i></span>
<span>Rate: <i>Thank you</i></span><i>Will be overwritten </i> <i>unlikes</i>
</div>
Or $(this).parent().next() instead. However closest is safer in case you wrap your <i> in something
(EDIT:
I forgot to ask to not use jQuery)
I'm trying to select html buttons based on their displayed text, not their class or id.
All the button have the same dom structure and classes. Like follow and unfollow buttons in the folowing example:
<button class="user-actions-follow-button js-follow-btn follow-button btn" type="button">
<span class="button-text following-text">
Following
</span>
<span class="button-text unfollow-text">
Unfollow
</span>
</button>
The closest solution I found is based on the dom structure like getElementsByClassName, getElementById and :contains(), but I can't figure it out.
EDIT2:
The solution in jQuery would be $('span:hidden:contains(Follow)').parent();
but I'm searching for a solution without jquery.
Try with the below code, you can style accordingly
$( "span:nth-child(1):contains('Following')" ).css( "background", "#ccc" );
you can give id's to spans as follows:
<span id="follow" class="button-text following-text">
Following
</span>
<span id="unfollow" class="button-text unfollow-text">
Unfollow
</span>
and then by using the below code in javascript, you can check their status
if(document.getElementById("follow").innerHTML=="Following"){
//follow
}
if(document.getElementById("unfollow").innerHTML=="Unfollow"){
//unfollow
}
I found a way to do it with :hidden but this is jQuery and thus not useful in my case.
$('span:hidden:contains(Follow)').parent();
The best thing I found now is to get all buttons first and then use a condition (takes 2 steps, but working).
var buttons=document.getElementsByClassName('...');
//loop...
if ( window.getComputedStyle(buttons[i].getElementsByClassName('...')[0] ).display === 'none' ) {
//buttons[i]
}
If you find a better solution it's still welcome :-)
I have some popup dialogs on my webpage, in each of these dialogs I have defined some click event with jQuery :
$(".links_view").click(function(e){ //code });
But the problem is when I activate one this click event, it will be executed in each dialog...
$(".links_view").click(function(e){ e.preventDefault() });
also have your dialogs different class OR id!?
I believe you want to isolate your click attachment; to do this, just make your selector (currently ".links_view") more specific.
For example, if you have the following HTML
<div id="one">
<button class="links_view">Hi</button>
</div>
<div id="two">
<button class="links_view">Ho</button>
</div>
the code $('.links_view') will grab both, but you can use $('#one .links_view') to just get the first or $('#two .links_view') for the second.
Here's a good tutorial on selectors: http://reference.sitepoint.com/css/selectorref
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$("#results").load( "jquery-routing.php", { pageNo: $(this).text(), sortBy: $("#sortBy").val()} );
return false;
});
});
</script>
<div id="results"> </div>
1
2
that code works fine, only problem that after I run it all my a href links stop to work! The links become jquery ajax calls.. why?
You're $("a") selector matches all <a ...> tags, you need to change it to something more specific:
$("a#someid")
$("a.someclass")
$("div#somecontainer a")
To target specific links, use the id or class tag on your anchor tags.
E.g.
<a class="link1" href=""></a>
<a id="link2" href-""></a>
Do note that id tags are unique within a page and can only be used once.
Reference those links in jQuery using:
$('a.link1').click(function() {}
$('#link2').click(function() {}
or you can combine both:
$('a.link1, #link2').click(function() {}
What you need to do is assign an id or class tag to the link that will call the ajax request. E.g. <a class="ajax" href="">ajax</a> and referencing it with $('a.ajax').click(function () {}
Your setting the onclick event of all anchor tags on the page. Try only selecting the link that you want instead of the more general $("a")
Your selector $("a") indicates all the hiperlink in your page.
You may need to give a specific id to the hiperlink where you want your ajax call to work and then change the selector based on that.
ex:
<a id= "my-link" href="" >ddd</a>
$("a#my-link").click()