I am trying to click a button and toggle series on and off. I do not understand why, but my button's HTML is showing a function and and not its attributes:
$button.click(function() {
alert($('#button').text);
if ($button.text == 'Show previous years')
{
for (var i=0;i<chart.series.length;i++)
{
if (chart.series[i].name.indexOf("13/14")== false)
{
chart.series[i].show();
}
alert($button.html);
$button.html('Hide previous years');
}
} else {
for (var i=0;i<chart.series.length;i++)
{
if (chart.series[i].name.indexOf("13/14")>0)
{
chart.series[i].show();
}
$button.html('Show previous years');
}
}
});
Please take a look: http://jsfiddle.net/pzh20/6cQ2N/8/
You're using .text which is a function.
Replace .text by .text() and it will be the text()'s return value, which is the string you're looking for.
http://jsfiddle.net/6cQ2N/9/
In this edited fiddle, you'll get a good alert value since I changed the .text to .text()
Related
I would like to have a jquery button event where the first time a button is clicked a div (with class .explanation) appears and the text changes and the second time it is clicked the div is hidden and the text changes back to the original text. I can do the first part but the second part does not work. In the below changing - (toggleClass("hidden") - to - .fadeOut... - doesn't work either so I think I have got something wrong with if and else. Thanks in advance
$("button:nth-of-type(1)").click(function() {
if (this.text = "Read Explanation") {
$(".explanation").fadeIn("slow", function() {});
$(this).text("Hide Explanation");
} else {
$(this).text("Read Explanation");
$(".explanation").toggleClass("hidden");
}
});
change
if(this.text = "Read Explanation") {
to
if($(this).text() === "Read Explanation") {
a demo:
$("button:nth-of-type(1)").click(function() {
if ($(this).text() === "Read Explanation") {
//$(".explanation").fadeIn("slow", function() {});
$(this).text("Hide Explanation");
} else {
$(this).text("Read Explanation");
}
$(".explanation").toggleClass("hidden");
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div><button>Read Explanation</button></div>
<div class="explanation hidden">explanation</div>
$(this) is jquery object with text() attribute while this is pure js
object without text or text() attribute in this case.
= is assignment operator while === is Comparison operators
There are several issues in your code:
this should be $(this)
text should be text()
You are using assignment operator in if condition. It should be comparison operator == or strict comparison operator ===
You can toggle the hidden class outside if-else block
$( "button:nth-of-type(1)" ).click(function() {
if($(this).text() == "Read Explanation") {
$(this).text("Hide Explanation");
} else {
$(this).text("Read Explanation");
}
$(".explanation").toggleClass("hidden");
});
.hidden{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='explanation hidden'>Some explanation</div>
<button>Read Explanation</button>
you can't make decisions based on data that can change.
if the text of the button changes, you'll need to change your code.
by this way, if the text of the button changes, you need to change your data.
This is not the best option, but it may works.
https://jsfiddle.net/foo8drb2/8/
var data = {
1: "Read Explanation",
2: "Hide Explanation"
}
// asssign default id to the text
var id_text = 1; //1 id for "Read Explanation"
// add data attribute to the button
$("button:nth-of-type(1)").attr("data-id-text", id_text);
// event
$("button:nth-of-type(1)").click(function () {
if ($(this).attr("data-id-text") == 1) {
//change id_text -> 2 for "Hide Explanation"
id_text = 2;
// show hide options
$(".explanation").fadeIn();
} else {
//change id_text -> 1 for "Read Explanation"
id_text = 1;
// show hide options
$(".explanation").fadeOut();
}
// change data id
$(this).attr("data-id-text", id_text);
// update text
$(this).text(data[id_text]);
});
Thanks everyone. This seems to be the simplest / close to what I had. I changed as suggested by Ankit:
this to $(this)
text to text()
= to ==
Using - fade out - instead of - hide - helped
$( "button:nth-of-type(1)" ).click(function() {
if($(this).text() == "Read Explanation") {
$(".explanation").fadeIn( "slow", function() {
});
$(this).text("Hide Explanation");
} else {
$(this).text("Read Explanation");
$(".explanation").fadeOut( "slow", function() {
});
}
});
I have two group of checkbox newBuilding & oldBuilding.
Idea over here is I can select checkbox only one of the group.
In each group there is checkbox name other area, so I when click on it, it will show and hide textbox next to it.
Now to achieve first point, lets for example that already we have oldBuilding checkboxes are checked and I if I click one of the newBuilding checkbox then it will remove the check from oldBuilding group but newBuilding checkbox will not get checked but just get focus, I have to click again to check.
What I found out that above issue happen when I call trigger event. How can I overcome the issue
Code for other area
$("#chkOldBuildingOtherAreas").change(function () {
if ($("#chkOldBuildingOtherAreas").is(":checked"))
$("#txOldOtherAreas").show();
else
$("#txOldOtherAreas").hide();
});
$("#chkNewBuildingOtherAreas").change(function () {
if ($("#chkNewBuildingOtherAreas").is(":checked"))
$("#txNewOtherAreas").show();
else
$("#txNewOtherAreas").hide();
});
Code for removing check mark from other groups
$("input[name='oldBuilding']").change(function () {
if ($("input[name='newBuilding']:checked").length > 0) {
$("input[name='newBuilding']").removeAttr('checked');
$("#chkNewBuildingOtherAreas").trigger("change");
}
});
$("input[name='newBuilding']").change(function () {
if ($("input[name='oldBuilding']:checked").length > 0) {
$("input[name='oldBuilding']").removeAttr('checked');
$("#chkOldBuildingOtherAreas").trigger("change");
}
});
My jsfiddle
https://jsfiddle.net/milindsaraswala/wchrwjnx/
https://jsfiddle.net/1ny36nwL/4/
var groups = ['.oldGroup', '.newGroup'];
$(groups.join(',')).find('input[type=text]').hide();
function resetGroup(selector) {
//clear and hide texts
$('input[type=text]', selector).val('').hide();
//uncheck boxes
$('input[type=checkbox]', selector).removeAttr('checked');
}
$("input[name='oldBuilding']").change(function(e) {
if (this.id == 'chkOldBuildingOtherAreas') {
$("#txOldOtherAreas").toggle();
}
resetGroup('.newGroup');
});
$("input[name='newBuilding']").change(function(e) {
if (this.id == 'chkNewBuildingOtherAreas') {
$("#txNewOtherAreas").toggle();
}
resetGroup('.oldGroup');
});
as you can see I added groups var which can contain multiple groups (not only two), but code need to be changed a little more for that to work
you need to detect id/class of current group by something like $(this).closest('.form-group').id and reset every group except current group. in that way you can leave only one change function which will be universal
oh and you also need to add some class for checkbox that contain text input, and if that checkbox is clicked, trigger toggle for input. so it won't be if (this.id == 'chkNewBuildingOtherAreas') { but something like if ($(this).hasClass('has-input'))
Try replacing this in your code. It should work.
$("#txOldOtherAreas").hide();
$("#txNewOtherAreas").hide();
$("input[name='oldBuilding']").change(function (e) {
$("input[name='newBuilding']").removeAttr('checked');
e.target.checked = true;
if (e.target.id == "chkOldBuildingOtherAreas") {
$("#txOldOtherAreas").show();
$("#txNewOtherAreas").hide();
} else {
$("#txNewOtherAreas").hide();
}
});
$("input[name='newBuilding']").change(function (e) {
$("input[name='oldBuilding']").removeAttr('checked');
e.target.checked = true;
if (e.target.id == "chkNewBuildingOtherAreas") {
$("#txNewOtherAreas").show();
$("#txOldOtherAreas").hide();
} else {
$("#txOldOtherAreas").hide();
}
});
You can try following code to fix the problem (Tested in fiddle):
$('#txNewOtherAreas, #txOldOtherAreas').hide();
$('input[name="oldBuilding"]').on('click', function(){
if($('input[name="newBuilding"]').is(':checked')){
$('input[name="newBuilding"]').removeAttr('checked');
$('#txNewOtherAreas').hide();
}
});
$('input[name="newBuilding"]').on('click', function(){
if($('input[name="oldBuilding"]').is(':checked')){
$('input[name="oldBuilding"]').removeAttr('checked');
$('#txOldOtherAreas').hide();
}
});
$('#chkNewBuildingOtherAreas').on('click', function() {
if($(this).is(':checked')){
$('#txNewOtherAreas').show();
} else {
$('#txNewOtherAreas').hide();
}
});
$('#chkOldBuildingOtherAreas').on('click', function() {
if($(this).is(':checked')){
$('#txOldOtherAreas').show();
} else {
$('#txOldOtherAreas').hide();
}
});
I have this code which asks a question; askQuestion()
which runs as the page loads and runs again when a button with id wb_option_button is clicked.
But I noted that at the first click, its runs well, but the second click never never run. I want to know what is wrong with it (in case), and how to do it work.
var q_selected;
var q_number = 1;
var questionDiv = $('.wb_questions');
var optionDiv = $('div#wb_options');
function askQuestion()
{
questionDiv.html(questions[q_number]['question']);
optionDiv.html('<button class="wb_option_button" id="wb_option_button" title="click to answer">'+questions[q_number]['options'][0]+'</button>'+
'<button class="wb_option_button" id="wb_option_button" title="click to answer">'+questions[q_number]['options'][1]+'</button>'+
'<button class="wb_option_button" id="wb_option_button" title="click to answer">'+questions[q_number]['options'][2]+'</button>'+
'<button class="wb_option_button" id="wb_option_button" title="click to answer">'+questions[q_number]['options'][3]+'</button>'
);
}
function checkAnswer(q_answer)
{
if(q_selected === q_answer)
{
return true;
}
}
function isCheckpoint()
{
if(checkpoints[q_number]!=null)
{
return true;
}
else
{
return false;
}
}
askQuestion();
$('button.wb_option_button').click(function(){
q_selected = $(this).text();
if(checkAnswer(questions[q_number]['answer'])===true)
{
if(isCheckpoint()===true)
{
showRank(q_number);
}
else
{
q_number+=1;
//alert(q_number);
askQuestion();
// showStage();
return q_number;
}
}
else
{
alert("You failed");
}
});
var questions is an object, var checkpoints ia also an object.
All of your buttons have the same ID. When you get an Element by id, it will only return the first element it finds with this id. If you want to get multiple elements you have to get them with another selector, ie. by className or any other means then by ID.
Edit : You are in fact selecting the buttons by className. The problem is that when you call askQuestion() again, the click listener is not added to the new buttons, so you might want to move the click event assignment inside askQuestion
Hope this helps.
After a little more digging, I arrived at this solution which works perfectly.
Thank you all for your help!!!
$('.wb_options').on('click','.wb_option_button',function(){
q_selected = $(this).text();
if(checkAnswer(questions[q_number]['answer'])===true)
{
if(isCheckpoint()===true)
{
showRank(q_number);
}
else
{
q_number+=1;
askQuestion();
alert(q_number);
// showStage();
//return q_number;
}
}
else
{
alert("You failed");
}
});
if (!$(this).is(":checked")) {
$.each(function(){
if ($('#result').has("Apartment")) {
$('#result').remove();
}
})
}
I want that if I uncheck a checkbox then the div having id="result" should be deleted which contains the text "Apartment". Currently this logic is not working for me.
Try this,
$('#checkboxId').change(function(){
if(!$(this).is(':checked')) {
$('#result:contains(Apartment)').remove();
}
});
DEMO
or
$('#checkboxId').change(function(){
if(!$(this).is(':checked')) {
if($('#result').text().indexOf("mystring")>-1) {
$('#result').remove();
}
}
});
particular id containing particular text?
if( $('elementselector').attr('id').indexOf('Apartment')>-1) { ..... }
unless there is some new JQ method out there
( note - elements must have an ID, or check has ID first etc .. )
Try this http://jsfiddle.net/Tushar490/bg82uw8s/
var IsCheck;
var txt = $("#result").text();
$("#chk").change(function () {
IsCheck = $("#chk").is(":checked");
if (!IsCheck) {
if (txt === 'Apartment') {
$("#result").remove();
}
}
});
I have a selected box with 5 values. I'm trying to fadeIn inputs of what is selected in the box. For example: If input1 is selected, fade in input1 on click.
Here is what I'm trying to do:
$(document).ready(function(){
$('.btn').click(function() {
if($("#selectbox").value == 'Input1') {
$(".input1").show();
} else if($("#selectbox").value == 'Input2') {
$(".input2").show();
} else if($("#selectbox").value == 'Input3') {
$(".input3").show();
} else if($("#selectbox").value == 'Input4') {
$(".input4").show();
} else if($("#selectbox").value == 'Input5') {
$(".input5").show();
}
}
});
And here is a NOT working fiddle:
http://jsfiddle.net/rzMHJ/
Your code have two errors and that's why its not working.
$("#selectbox").value should be $("#selectbox").val()
you have not closed your click event with );
Also its much better to use switch case in this example.
Working Demo: http://jsfiddle.net/naveen/Zn2yy/
Update (based on Nick Cravers comment)
For this particular scenario you could simplify code a lot like this.
Demo: http://jsfiddle.net/nick_craver/BWacA/
There are two problems with your code that is causing it to fail.
First, replace .value with the jQuery function val().
Second, add ); to the second to last } at the end.
Here is working refactored code:
$(document).ready(function() {
$('.btn').click(function() {
var show = "." + $("#selectbox").val().toLowerCase();
$(show).fadeIn();
});
});