I'm trying to get the button to toggle between showing text in different languages. When I click the button nothing happens, can someone help out please?
$(document).ready(function() {
$('[lang="jp"]').hide();
$(document).on('click', '#switch-language', function() {
$('[lang="en"]').toggle();
$('[lang="jp"]').toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="switch-lang">Switch Language</button>
<p lang="en">eigo</p>
<p lang="jp">en japon</p>
You have a typo in your Selector.
$(document).ready(function() {
$('[lang="jp"]').hide();
$(document).on('click', '#switch-lang', function() {
$('p[lang="en"]').toggle();
$('p[lang="jp"]').toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="switch-lang">Switch Language</button>
<p lang="en">eigo</p>
<p lang="jp">en japon</p>
No element has "switch-language" as the ID. When you change it to the correct value, "switch-lang", it works.
Related
Hello i'm trying to add an event of click on a button when the user click a label,
its working fine but the user have to click on the label twice i need to make it work from the first click
this is my function :
(function($){
$('.next-on-click .forminator-checkbox-label').on('click', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<lable class="next"> Next </lable>
<button class="check">Check</button>
<script>
$('.next').click(function() {
alert("Hi");
$('button.check').trigger('click');
});
</script>
example:
$('.next-on-click .forminator-checkbox-label').on('dblclick', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
})
So why would you need JavaScript to handle the click? Adding an for attribute on a label will click the button.
$("#btn").on("click", function () {
console.log("clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="btn">Label</label>
<button id="btn">Button</button>
I'm trying to enable/disable some buttons, using another toggle button.
I'm trying to do it by adding a class 'active' to the buttons, and targeting only the buttons with the class.
Here is an example (That doesn't work):
$('#on-off').on('click', () => {
$('#test').addClass('active');
$('#indication').text('Test is active');
});
$('#test .active').on('click', () => {
$('#result').text('Test was clicked!');
});
<button id='on-off'>Toggle Test</button>
<div id='indication'></div>
<button id='test'>Test</button>
<div id='result'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The full code is here.
You should set the disabled property to enable or disable it. You can use .prop() method
Also note #test .active will not work as its descendant selector and button has no child element.
$('#on-off').on('click', () => {
$('#test').prop('disabled', !$('#test').prop('disabled'));
$('#indication').text('Test is active');
});
$('#test').on('click', () => {
$('#result').text('Test was clicked!');
});
<button id='on-off'>Toggle Test</button>
<div id='indication'></div>
<button id='test'>Test</button>
<div id='result'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I want to change the button's value with fading effect when i click on it. My code is:
html:
<button> some value </button>
script:
$(document).ready(function(){
$("#btn_1").click(function (){
$(this).prop('value', "new value!"); // line1
});
});
From another stackoverflow answer, I found that if i replace line1 with $(this).find('span').html('Collapse').hide().fadeIn('slow');
and change the html part to <button> <span> some value </span> </button> it works. However, is there a way to achieve the transition effect using jquery without using span tags ?
Do you want something like this?
just use $(this).text('new value!').hide().fadeIn('slow');
$(document).ready(function() {
$("#btn_1").click(function() {
$(this).text('new value!').hide().fadeIn('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_1"> some value </button>
You can set text property of button. and you can fadeOut and fadeIn
$(document).ready(function(){
$("#btn_1").click(function (){
$(this).text("You Clicked").fadeOut().fadeIn();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_1">Click HERE</button>
Hi I am making an effect that is when Mouse Enter in div one button shows in that div and when user mouse leave that area again button hide.
It works but the problem is that I have used div many times so I have used class for div definition.
So when Mouse enter in one div other div also affected.
Code :
jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#container").mouseenter(function(){
$(":button").show();
});
$("#container").mouseleave(function(){
$(":button").hide();
});
});
</script>
jsp code :
<div id="container">
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=3">
<img src="product_images/Tulips1760331818.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">Nokia Lumia 925</div></div>
<div class="mainitemlistprice"><div align="center">38000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=5">
<img src="product_images/Jellyfish456319058.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">HCL Me</div></div>
<div class="mainitemlistprice"><div align="center">40000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
</div>
I have try to put Jquery on class="mainitemlist" but It's not working.
So I have added in id="container".
Anyone have idea, why it's not working ???
You can do this:
$(document).ready(function () {
$(".mainitemlist").mouseenter(function () {
$(this).find(":button").show();
}).mouseleave(function () {
$(this).find(":button").hide();
});
});
Demo: Fiddle
When you used the class mainitemlist you were not using the function scope properly using $(this) and hence it showing all the button on mouseenter, since you used the code:
$(":button").show();
UPDATE
$(document).ready(function () {
$(document).on('mouseenter', '.mainitemlist', function () {
$(this).find(":button").show();
}).on('mouseleave', '.mainitemlist', function () {
$(this).find(":button").hide();
});
});
try:
$(document).ready(function(){
$("#container").mouseenter(function(){
$("#container button").show();
});
$("#container").mouseleave(function(){
$("#container button").hide();
});
});
check out this fiddle.
b.t.w, you have 2 divs with the id of container. this is probably a mistake, and if not, it's bad practice.
hope that helps.
$("#container").mouseenter(function(){
$(this).find('#yourbutton').show();
});
$("#container").mouseleave(function(){
$(this).find('#yourbutton').hide();
});
I want to add slideUp effect to my page. My <body> code is:
<script>
$('#slide_up').click(function(){
$('p.text_study').slideUp('slow', function() {
$('#result').html("ok");
});
});
</script>
<img src="img/slide_up.png" alt="slide_up" id="slide_up">
<p class="text_study">Some text.</p>
<div id="result"></div>
When i click a button nothing happens. Please help.
Wrap it in $(document).ready. Your click handler is being assigned before the #slide_up element is ready for use:
$(document).ready(function(){
$('#slide_up').click(function(){
$('p.text_study').slideUp('slow', function() {
$('#result').html("ok");
});
});
});
JSFIDDLE http://jsfiddle.net/3uhCa/2/
Nothing wrong with your code. are you loading jquery correctly?
<img src="img/slide_up.png" alt="slide_up" id="slide_up">
<p class="text_study">Some text.</p>
<div id="result"></div>