We Keep Coding

Returning variable from jquery on select function to another jquery on click fucntion

I want to the value of paramValue from .change event function into var searchValue to be displayed together at .click event. console.log(paramDD) gives me "undefined".
$( '#userSearchParam' ).change(function paramDropDown(){
var paramValue = $(this).val();
console.log(paramValue);
return paramValue;
});
var paramDD = paramDropDown();
console.log(paramDD);
$('#userSearchBtn').click(function () {
var textBoxValue = $('#userSearchBox').val();
console.log(textBoxValue);
var searchValue = textBoxValue + paramDD;
console.log(searchValue);
});

Try this:
function paramDropDown(){
var paramValue = $('#userSearchParam').val();
console.log(paramValue);
return paramValue;
}
$( '#userSearchParam' ).change(paramDropDown);
var paramDD = paramDropDown();
console.log(paramDD);
I'm not sure exactly what you're trying to accomplish though. If you can let us know your use case maybe we can recommend a solution.

how should i change a var to next sibling on click event with jquery

Using the following script to traverse a list of elements with a class of blur doesn't work
<script type="text/javascript">
$(document).ready(function(){
var current = $('.blur').first();
$("#scroll-down").click(function(){
$(current).toggleClass('blur-unfocused');
current = $(current).next('.blur');
});
});
</script>
How would you improve this script to traverse to the next item with a class blur ?

Since they could be anywhere on the page, I would store them all and iterate through them instead of just retrieving the first one and trying to locate the following one:
$(document).ready(function(){
var $allBlurs = $('.blur');
var currentIndex = 0;
$("#scroll-down").click(function(){
// Retrieve Current Blur
var $current = $allBlurs.eq(currentIndex);
// Increment Index (optionally looping)
currentIndex = (currentIndex + 1) % $allBlurs.length;
// Retrieve Next Blur
var $next = $allBlurs.eq(currentIndex);
$current.toggleClass('blur-unfocused');
/* ... more code here ... */
});
});
Example Fiddle

Could you do something like this?
$(document).ready(function(){
var current = $('.blur').first();
$("#scroll-down").click(function(){
$(current).toggleClass('blur-unfocused');
current = $('.blur:not(.blur-unfocused)');
});
});

You could store them in an array and then traverse as needed:
<script type="text/javascript">
$(document).ready(function(){
var all = $('.blur');
if (all.length > 0) {
var currentCount = 0;
var current = all[currentCount];
$("#scroll-down").click(function(){
$(current).toggleClass('blur-unfocused');
if (all.length > currentCount-1) {
current = all[++currentCount];
}
});
}
});
</script>

How to append the class of a clicked link to the end of the href of another anchor tag?

I'm working on a website that makes use of isotope filters and hash history.
However, in order for my filters to work I need #filter=.print to be added after the permalink of my thumbnails "a.perma". the ".print" is the class of the filter thats being clicked "option-set a". In this case the print filter.
I am not too skilled at jQuery and any help would be appreciated.
Here's the code I've been messing with:
var myClass;
jQuery("option-set a").click(function() {
myClass = jQuery(this).attr("class");
});
jQuery("a.perma").each(function() {
var _href = jQuery(this).attr("href");
jQuery(this).attr("href", _href + myClass);
});

Here is the working code. Removes any previous filters. Keeps the permalink value even after going to another page and coming back. Uses localStorage.
if(typeof(Storage)!=="undefined") {
var oldClass = localStorage.getItem("permalink");
if(oldClass != null && oldClass != "") {
jQuery("a.perma").each(function() {
var _href = jQuery(this).attr("href");
_href = _href.split("#")[0];
jQuery(this).attr("href", _href + "#filter=." + oldClass);
});
}
}
jQuery("option-set a").click(function() {
myClass = jQuery(this).attr("class");
jQuery("a.perma").each(function() {
var _href = jQuery(this).attr("href");
_href = _href.split("#")[0];
jQuery(this).attr("href", _href + "#filter=." + myClass);
if(typeof(Storage)!=="undefined") {
localStorage.setItem("permalink", myClass);
}
});
});

You could try this, using .attr() with a function to determine and set the new value to avoid having to iterate and get/set separately.
jQuery("option-set a").click(function() {
var myClass = this.className; // same as $(this).attr('class');
jQuery('a.perma').attr('href', function(i, oldHref) {
return oldHref + '.' + myClass;
});
});
Depending on what the original href attributes look like you may have to add more or less to the string; I've assumed in the above that the #filter= part is already included. You may also want to check that it's not already in the existing href so it's not added more than once.

jQuery getting ID of clicked link

I have a modal box in jQuery which I have created to display some embed code. I want the script to take the id of the link that is clicked but I can't seem to get this working.
Does anyone know how I can do that or why this may be happening?
My jQuery code is:
function generateCode() {
var answerid = $('.openembed').attr('id');
if($('#embed input[name="comments"]:checked').length > 0 == true) {
var comments = "&comments=1";
} else {
var comments = "";
}
$("#embedcode").html('<code><iframe src="embed.php?answerid=' + answerid + comments + '" width="550" height="' + $('#embed input[name="size"]').val() + '" frameborder="0"></iframe></code>');
}
$(document).ready(function () {
$('.openembed').click(function () {
generateCode();
var answerid = $('.openembed').attr('id');
$('#box').show();
return false;
});
$('#embed').click(function (e) {
e.stopPropagation()
});
$(document).click(function () {
$('#box').hide()
});
});
My mark-up is:
Embed
Embed

Your problem is here:
$('.openembed')
returns an array of matched elements. Your should instead select only the clicked element.
$('.openembed') works correctly if you assing a click event to all elements that have this class. But on the other hand, you're unable do know which is clicked.
But fortunately in the body of handler function click you could call $(this).
$(this) will return the current (and clicked element).
// var answerid = $('.openembed').attr('id'); // Wrong
var answerid = $(this).attr('id'); // Correct
// Now you can call generateCode
generateCode(answerid);
Another error is the body of generateCode function. Here you should pass the id of selected element. This is the correct implementation.
function generateCode(answerid) {
if($('#embed input[name="comments"]:checked').length > 0 == true) {
var comments = "&comments=1";
} else {
var comments = "";
}
$("#embedcode").html('<iframe src="embed.php?answerid=' + answerid + comments + '" width="550" height="' + $('#embed input[name="size"]').val() + '"frameborder="0"></iframe>');
}
Here I have implemented your code with the correct behavior: http://jsfiddle.net/pSZZF/2/

Instead of referencing the class, which will grab all members of that class, you need to reference $(this) so you can get that unique link when it is clicked.
var answerid = $(this).prop('id');

$('.openembed').click(function () {
generateCode();
var answerid = $(this).attr('id');
$('#box').show();
return false;
});
Use $(this). $('.openembed') refers to multiple links.

var answerid = $('.openembed').attr('id');
needs to be
var answerid = $(this).prop('id');

The other answers are trying to fix the click() function, but your issue is actually with the generateCode function.
You need to pass the clicked element to the generateCode function:
$('.openembed').click(function () {
generateCode(this);
And modify generateCode:
function generateCode(element) {
var answerid = element.id;
Of course var answerid = $('.openembed').attr('id'); within the click code isn't correct either, but it doesn't seem to do anything anyway.

Get the id when the correct anchor is clicked and pass it into your generateCode function
$('.openembed').click(function () {
var answerid = $(this).attr('id');
generateCode(answerid)
$('#box').show();
return false;
});
Change your function
function generateCode(answerid) {
// dont need this line anymore
// var answerid = $('.openembed').attr('id');

jQuery function that will remove specific word on click

I have the following information in a div
<div class="list">Abc, Test, Ready</div>
Below the div, I have this additional information
Remove Abc
Remove Test
Remove Ready
I am trying to write a jQuery function that will remove either Abc, Test, Ready (and the comma if necessary) when you click on the relevant remove link.

$('a').click(function() {
var str = $(this).attr("class");
$('.list').text($('.list').text().replace(str,''));
});
http://jsfiddle.net/PUure/
But if you really need commas removed, you need to be a bit more creative:
$('a').click(function() {
var str = $(this).attr("class");
var rgx = new RegExp(str + ',?\\s*');
$('.list').text($('.list').text().replace(rgx,''));
});
http://jsfiddle.net/PUure/4/

Edit: Updated for (lazily) removing trailing commas without regex ;)
Check the fiddle
$(document).ready(function(){
$('a').click(function(){
$('div.list').html($('div.list').html().replace($(this).attr('class') + ', ', '').replace($(this).attr('class'), ''));
});
});

You could do:
$('a').click(function(e){
e.preventDefault();
var word = $(this).attr('class');
var div = $('.list').text();
div = div.replace(word, '');
$('.list').text(div );
});
fiddle here http://jsfiddle.net/sysCc/

$('a').click(function(){
var str = $(this).attr('class');
var obj = $('.list');
var currentText = obj.text();
obj.text(currentText.replace(str,'');
});
or condensed:
$('a').click(function(){
$('.list').text($('.list').text().replace($(this).attr('class'),''));
});

You'd be better off keeping the data in an array, then modifying that array and refreshing your div with the new data.
var data = ["Abc", "Test", "Ready"];
refresh();
$("#Abc").click(function() { remove("Abc") });
$("#Test").click(function() { remove("Test") });
$("#Ready").click(function() { remove("Ready") });
function refresh() {
$("div").text(data.join(", "));
}
function remove(word) {
for(var i = 0; i < data.length; i++) {
console.log(i, data[i], word, data[i] == word);
if (data[i] == word)
data.splice(i, 1);
}
console.log(data);
refresh();
}
http://jsfiddle.net/Xeon06/dHp3b/