I am trying to hide and show different div's depending on which radio you select. Unfortunately I could not come up with working solution so far. Here is my starting code http://jsbin.com/edokef/1/edit
Maybe someone could suggest how to achieve that? I was thinking about getting the index of each radio but each radio is inside separate div wrap and in that case the index is always 0.
Thank you for any idea.
Demo: http://jsbin.com/edokef/7/edit
Code:
options.click(function(){
var id = "opt" + $(this).val();
$(".optDivs").hide();
$("#" + id).show();
});
Plus, each div that should be shown has a class now (optDivs)
You can use toggle() to show or hide based on div based on radio button
var options = $('#options').find('input');
options.click(function(){
$("#"+$(this).parent().attr('class')).toggle();
});
})();
DEMO
Sorry for not providing You with a full solution.
1) Why do You want to use indexes? Every radio has a value. Use that instead.
2) "to hide and show different div's depending on which radio you select" sounds to me at least like one to many relationship. I recommend using publisher/subscriber for this task. There are many usable implementations of this pattern eg. https://github.com/federico-lox/pubsub.js
PS Try to avoid pubsub implementations based on jQuery (they manipulate on DOM and and are kinda slow)
may be this can help you
$(function(){
(function(){
var options = $('#options').find('input');
options.click(function(){
if($(this).is(':checked'))
{
$('#' + $(this).parent().attr('class')).show();
}
else
{
$('#' + $(this).parent().attr('class')).hide();
}
});
})();
});
DEMO
This will work:
<script>
$(function(){
(function(){
var options = $('#options').find('input');
$(options).click(function(){
$('#opt1, #opt2, #opt3').hide();
$('#' + $(this).parent().attr('class')).show();
});
})();
});
</script>
Related
I want to select a button with casperjs, but my issue is that the button has changing IDsand classes. I can only "identify" the button, based on the text of a span 2 levels done:
<button class="changes-always" id="changes-always-too">
<div class="changes-always2">
<span class="changes-always3">Same text</span>
</div>
</button>
With jQuery I can select the button, by first selecting the span, because it always has the same content.
var span = $('span:contains("Same text")');
var button = span.parent().parent() // there is probably a nice way to do this
I got jQuery loaded by casperjs by including it as clientScripts, my issue is how to correctly get it working with the evaluate(function() as well as use the variables as selectors with casperjs (if that's even possible)
This is how far I got, but then I ran into problems with object and string issues.
casper.then(function() {
var items = this.evaluate(function () {
return $('span:contains("Some text")');
});
console.log(items);
});
Would be great, if someone could point me in the right direction, how to use jQuery as a selector and then let casperjs use it. Thanks many times in advance!
You can also use clickLabel() if the text is unique.
casper.clickLabel("Some text");
This should work for buttons, too.
Another option and still not with jquery should be getting the id's by text and if there are sometimes the same text, grab them out by the index:
...
var x = require('casper').selectXPath;
var buttonIDs;
// get button ID's with specific text by getElementsAttribute with xPath selector
buttonIDs = casper.getElementsAttribute(x("//button[contains(text(),'Some specific text')]"), 'id');
casper.then(function() {
casper.echo(buttonIDs);
});
casper.then(function() {
casper.click("button[id='" + buttonIDs[0] + "']");
});
...
I've being trying to implement a simple slider, but I wanted to have the title of my different div tags to be used as caption for each category of the product. But for some reason, the function only shows the title of the first div and doesn't chenge. How do I correct it?
Here's what I've added:
$('.next').click(function(){
$('#titlebox').text($('.room').attr('title'));
});
to the end of this script:
http://codepen.io/anon/pen/OVBvRO.
Basically, what I want to achieve is to insert a caption to a product (which is displayed) in a div above the slider. If there is an alternative to what I've tried, like getElementsbyID - please help me to write it too! As long as it gets the job done =)
Thanks in advance!
You can use the :nth-child() selector and pass in your currentIndex:
$('.next').click(function() {
$('#titlebox').text($('.room:nth-child('+currentIndex+')').attr('title'));
});
Note that :nth-child() starts with :nth-child(1). So you will want to use (currentIndex + 1) or have currentIndex a minimum value of 1.
Here is an example codepen, with the same functionality added to $('.prev').click to show that it works.
Try this one:
$('.demo').on('click', function(e) {
var title = $(items[currentIndex]).attr('title');
if ($(e.target).hasClass('next') && title) {
$('#titlebox').text(title);
}
});
http://codepen.io/godban/pen/QbZmxz
I have been trying to get two forms on the same page to work and the only issue i'm having is not getting the clone inputs to work, they seem to conflict with each other due to the div elements.
I have been using this tutorial as a guide:
http://www.9lessons.info/2009/06/submit-multiple-forms-jquery-ajax.html
Here is the code working with one form:
http://jsfiddle.net/yBdTA/
And this is what i want to achieve:
http://jsfiddle.net/c4Uce/
Notice when you click on the second 'Add More' link the first input clones rather than the second.
I know i could duplicate the jQuery function for the clone to match the second form:
$(function(){
var removeLink = ' <a class="remove" href="#" onclick="jQuery(this).parent().slideUp(function(){ jQuery(this).remove() }); return false">remove</a>';
jQuery('a.add').relCopy({ append: removeLink});
});
but i want this to be, how can i call it, dynamic? like the 9lessons guide, i can use PHP to create unique identifiers for the clone elements and want the jQuery to match the ID's,
Hope i made this clear.
Help appreciated.
U can try it , it work to multi form
http://jsfiddle.net/yBdTA/2/
(function($) {
function remove(){
$('.clone').each(function(i){
var input= $(this);
input.find('a.remove').click(function(){
input.remove();
});
});
}
$('form').each(function(i){
var form = $(this);
var removeLink = '<a class="remove" href="#">remove</a>';
var iputclone = form.find('p.clone').append(removeLink);
form.find('a.add').click(function(){
iputclone.clone().insertBefore(this);
remove();
});
});
})(jQuery);
Update :
iputclone.clone().insertBefore(this).find('.input').attr('value','');
//So easy, U can think a object when we start will is ifself, use it next, and next
I use html's data- attribute on a list of menu links in order to tie the links to the div ids of sections of content I want to open when the links are clicked. So if I have a hidden div called "#section1" - the link that would open that link is .
Currently, in order to find the div that matches this link, I use jquery .each() to loop through all the possible elements, but it seems like there should be a better way.
Does anybody know how I could streamline this code and find the matching element without having to run the code in a loop?
Here's my code:
$('a.hidden_link').click(function(){
section_ident = $(this).attr('data-ident');
$('.hidden_section').each(function(index) {
if ($(this).attr('data-ident') == section_ident){
section_ref = $(this);
section_ref.show();
}
});
});
This should work.
$('a.hidden_link').click(function(){
$(".hidden_section[data-ident='"+$(this).attr('data-ident')+"']").show();
});
Jsfiddle, http://jsfiddle.net/playerace/H7jwb/
$('.hidden_section[data-ident="' + section_ident + '"]').show();
all together:
$('a.hidden_link').click(function(){
var section_ident = $(this).attr('data-ident');
$('.hidden_section[data-ident="' + section_ident + '"]').show();
});
This sounds like a job for jQuery.filter()!
$('a.hidden_link').click(function(){
var section_ident = $(this).data('ident');
$('.hidden_section').filter(function() {
return this.attributes["data-ident"] == section_ident;
}).show();
});
I am somewhat new to jQuery and am hoping to get a little help on this problem I have.
Heres what I am trying to do:
I need the ability to fire off a notification when a user selects an option from a select box. All the select boxes on the page share the same id and name, as well as live under div classes with the same name. This part is working, however I will have multiple select boxes on the page. When I make a selection for one, it fires off the notification to all instances instead of just the selected one.
How do only get the notification to fire on the selected instance?
Here is the JS so far:
$("select[name=regStatus]").change(function () {
var str = "";
var text = $(this).find("option:selected").text();
str += " Status changed to: " + $(this).find("option:selected").text();
$(".responseMsg").text(str).fadeIn(500);
$(".responseMsg").delay(2000).fadeOut(1000);
return false;
});
AND the html structure (this code will be repeated on the page several times):
<div class="dash-hdr-extras plain">
<div class="responseMsg"></div>
<select id="regStatusSelect" name="regStatus">
<option value="0">Example1</option>
<option value="blah">Blah</option>
<option value="blah2">Blah 2</option>
</select>
</div>
Any help on this would be greatly appreciated, as I am still learning!
$("select[name=regStatus]").change(function () {
//...Your code...
$(this).parent().find(".responseMsg").text(str).fadeIn(500);
//...Rest of your code...
});
This gets the parent of the element that fired the change event, and then finds the children of that element matching the selector.
The reason it was writing your message to all .responseMsg elements, is that using $(".responseMsg") simply selects all matching elements in the DOM, and applies whatever follows to the entire set.
Another option, if you are sure the structure of your HTML is not going to change, is to use the prev method, which gets the previous sibling of the current element. With the code in your question, that's fine, but if it changes this might not work:
$(this).prev().text(str).fadeIn(500);
On a separate note, you mention in your question that all select elements have the same ID. That's invalid HTML and will cause you no end of problems. Every ID in a document needs to be unique.
Try this
$("select[name=regStatus]").change(function () {
var str = "";
var text = $(this).find("option:selected").text();
str += " Status changed to: " + $(this).find("option:selected").text();
$(this).closest("div.dash-hdr-extras").find("div.responseMsg").text(str).fadeIn(500)
.delay(2000).fadeOut(1000);
return false;
});
Also, like james said, Ids should not be repeated. To use the same function on many elements, do this:
$("#select1")
.add('#select2')
.add('#select3')
.add('#select4')
.add('#select5')
.change(function () {
});
keep the Ids unique...