I have a small jquery problem:
My code is like this:
<div id="select-word-5" class="select-word-link"> - some content - </div>
<div id="select-5" class="select"> - some content - </div>
I have throughout my document several select-word-link and select divs.
I want to add a click event to the first div, that reacts just to the second div.
My idea was to loop through all the "select-x" elements, but i think there is a much better way?
$('.select-word-link').each(function()
{
var id = this.id;
var idLink = this.id.replace("-word", "");
$('.select').each(function()
{
if (idLink == this.id)
{
$(id).click(function() {
alert("this does not work");
});
});
});
You can do this easier by triggering an action on an event.
$('#select-5').click(function(){
alert('Does this work?');
});
$('.select-word-link').click(function(){
$('#select-5').trigger('click'); // will behave as if #select-5 is clicked.
});
Info: http://api.jquery.com/trigger/
More advanced:
$('#select-5').click(function(){
alert('Does this work?');
});
$('#select-6').click(function(){
alert('Does this work?');
});
// etc
$('.select-word-link').click(function(){
var selectId = this.id.replace('-word', '');
$('#'+selectId).trigger('click'); // will behave as if #select-5 is clicked.
});
maybe this code help you
$(".select-word-link").click(function(){
$(this).next().hide();
});
});
try
$('.select-word-link').first().on('click',function(){
// you code goes here
})
jQuery as CSS uses # selector to identify that this string is an Id.
e.g.
<div id="someId"></div>
and you execute this code:
$('#someId')
this will select the DOM object that has the Id someId
while id property returns the id of the DOM object without the selector # i.e. this jQuery code:
var id = $('#someId').get(0).id
will initialize the variable id to 'someId'
Thus, in your code add '#' in the selector
$('#' + id).click(function() {
alert("this does not work");
});
You have to trigger click next() element not all .select
$(".word").click(function() {
var selectId = this.id.replace('-word', '');
console.log(selectId);
$('#'+selectId).trigger('click');
});
$(".next").click(function() {
alert($(this).html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select-word-5" class="select-word-link word">- some content 5-</div>
<div id="select-word-6" class="select-word-link word">- some content 6-</div>
<div id="select-word-7" class="select-word-link word">- some content 7-</div>etc.
<div id="select-5" class="select-word-link next">- some content next 5-</div>
<div id="select-6" class="select-word-link next">- some content next 6-</div>
<div id="select-7" class="select-word-link next">- some content next 7-</div>
very simple solution
$('#select-5 , .select-word-link').click(function () {
// your code
});
If you want trigger same functionality from 2 or more different div ids or classes or combination of both then put separated by , like '#select-5 , .select-word-link' as shown in above example.
Related
how can it be achieved that when a div is clicked and value is changed, that div class name to be saved to another variable?
Here is the code.
<div id="tradicionalen" contenteditable="true">
<div class="tradicionalen-0">0.1</div>
<div class="tradicionalen-1">0.5</div>
<div class="tradicionalen-2">1.1</div>
<div class="tradicionalen-3">1.7</div>
<div class="tradicionalen-4">2.8</div>
<div class="tradicionalen-5">4.4</div>
<div class="tradicionalen-6">5</div>
</div>
I tried:
$("#tradicionalen").children().click(function(){
alert($(this).attr("class"));
});
and
$("#tradicionalen").find("div").click(function(){
alert($(this).attr("class"));
});
and
$("#tradicionalen div").click(function(){
alert($(this).attr("class"));
});
and still no luck.
I'm using this so I can save the table for later use.
Thanks!
What you've pasted above should work:
var savedVariable;
$("#tradicionalen div").click(function(){
savedVariable = $(this).attr("class");
console.log('Updated: ' + savedVariable);
});
Demo: http://jsbin.com/biwako/1/edit
You can also use delegated events:
$("#tradicionalen").on("click", "div", function () {
console.log($(this).attr("class"));
});
Doing it like this attaches one event handler to the #tradicionalen element. When any div inside #tradicionalen is clicked, the event bubbles upwards until it is caught by the handler, which passes it on to the appropriate callback function.
I want to hide an element which is not a certain class via jQuerys not() :
Content 1
Content 2
<div class="post-item c_1"></div>
<div class="post-item c_2"></div>
and
var thisContent;
jQuery('.content-btn').click(function() {
thisContent = this.id;
jQuery('.post_item').not('.'+thisContent).fadeOut();
}
am I using .not() method wrong in this context, because it seems not to work!
Your selector needs to be
jQuery('.post-item')
And you need to close the ) at the end of your jQuery, like this:
var thisContent;
jQuery('.content-btn').click(function() {
thisContent = this.id;
jQuery('.post-item').not('.'+thisContent).fadeOut();
});
See http://codepen.io/anon/pen/EaNXjg for a working example.
Try using
$(element).hasClass(".clasname").fadeOut();
as #AND Finally noticed modify your selector .. and while you use click on Anchor you need to use e.preventDefault; try this
jQuery('.content-btn').click(function(e) {
e.preventDefault;
thisContent = this.id;
jQuery('.post-item').not('.'+thisContent).fadeOut();
$('.'+thisContent).fadeIn();
});
DEMO
I have on my site alot of payment systems and instructions for them (visa, mastercard, amex and so..).
This script shows instructions when clicking on button.
$('#show-visa').click(function() {
$('#instruction-visa').fadeIn();
});
$('#close-visa').click(function() {
$('#instruction-visa').fadeOut();
});
I would need to duplicate this same script for every payment system, but there are many of them (aroung 20-25).. Writing same script for every payment system is not good idea. How can i do it better way?
Since I cannot see your markup, I will improvise...
Several things to note:
I am using .fadeToggle() instead of .fadeIn() and .fadeOut()
Use a common class for toggle buttons and have one .click() handler for all of them
Make use of data-* in your markup
jQuery:
$('.toggle-option').click(function() {
var $target = $(this).data('target'); // Get the data-target attribute
$('#' + $target).fadeToggle(); // Toggle the id specified by data-target
});
HTML:
<button class="toggle-option" data-target="visa">Toggle Visa</button>
<button class="toggle-option" data-target="mastercard">Toggle Mastercard</button>
<button class="toggle-option" data-target="maestro">Toggle Maestro</button>
DEMO
You can extend the jquery prototype object. I created a simple jsfiddle for you.
JSFiddle
$.fn.test = function(){
alert('the id is: ' + $(this).attr('id'));
}
If you want to have different selectors in your html structure for each payment system you could make an array with your payment system names and use $.each function on it to add handler for each one.
var paymentSystems = ['visa', 'mastercard', etc... ];
$.each(paymentSystems, function(name){
$('#show-' + name).on('click', function() {
$('#instruction-'+name).fadeIn();
});
$('#close-' + name).on('click', function() {
$('#instruction-'+ name).fadeOut();
});
};
Add a class to every single element and use the data- attribute to get the element which should be shown.
HTML
<button class="show" data-id="element1">Show</button>
<button class="hide" data-id="element1">Hide</button>
<button class="show" data-id="element2">Show</button>
<button class="hide" data-id="element2">Hide</button>
<div class="element" id="element1">Element1</div>
<div class="element" id="element2">Element2</div>
Js
$(function () {
$(".show").click(function () {
$("#" + $(this).data("id")).fadeIn();
});
$(".hide").click(function () {
$("#" + $(this).data("id")).fadeOut();
});
});
JsFiddle
I have more similar elements in HTML which are being added continously with PHP. my question is the following:
With jQuery, I would like to add a click event to each of these <div> elements. When any of them is being clicked it should display it's content. The problem is that I guess I need to use classes to specify which elements can be clickable. But in this case the application will not be able to decide which specific element is being clicked, right?
HTML:
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
jQuery try:
$("test").on("click", function()
{
var data = ???
alert(data);
});
UPDATE - QUESTION 2:
What happens if I'm placing <a> tags between those divs, and I want to get their href value when the DIV is being clicked?
I always get an error when I try that with this.
this refers to the element triggering the event. Note that it is a regular js element, so you'll need to convert it to a jQuery object before you can use jQuery functions: $(this)
$(".test").on("click", function()
{
var data = $(this).text();
alert(data);
});
Like this:
$(".test").on("click", function(event)
{
var data = $(event.target);
alert(data.text());
});
this variable contains the reference of current item
$(document).ready(function() {
$(".test").click(function(event) {
var data = $(this).text();
alert(data);
});
})
;
The class selector in jquery is $(".ClassName") and to access the value, use $(this) as such:
$(".test").on("click", function(){
var data = $(this).text();
alert(data);
});
You can use this inside the function which mean clicked div
DEMO
$(".test").on("click", function () {
alert($(this).html());
});
Here is the JsFiddle
I have a button that will add a new header, textbox, and a link when it's click.
But when I click on the remove link. It's removes every new item that was added.
Html:
<div id='main'>
Top of Boby
<div id='main_1'>
<div>
<h3> Item</h3>
<input type="text" />
</div>
</div>
</div>
JS:
$(function() {
$('.AddItem').click(function() {
$('div#main_1').append("<div><h3>Item</h3><input type='text' class='remove_skill'/><a href=''>Remove</a</div>");
});
})
$(function() {
$('.remove_skill').click(function() {
$(this).remove();
});
})
2 issues..
You have never defined the class for the anchor. Add the class to the anchor
You need to remove the enclosing div and not the anchor. Use .closest
Also you need to delegate the event as the elements are being added dynamically
$('#main').on('click', '.remove_skill', function (e) {
e.preventDefault();
$(this).closest('div').remove();
});
Check Fiddle
The problem with the code you've posted is that no links exist at the moment you call $('.remove_skill').click, so you can't add event listeners to them.
I recommend a step-by-step approach. Create, add behaviour, append to the document.
$('.AddItem').click(function () {
var new_element = $('<div class="item"><h3>Item</h3><input type="text"/><a class="remove" href="#">Remove</a></div>');
new_element.find(".remove").click(remove_item);
$('div#main_1').append(new_element);
});
function remove_item() {
$(this).closest(".item").remove();
return false;
}
I recommend <a href="#"> for javascript-handled links.
Alternative solution using a closure:
$('.AddItem').click(function () {
var new_element = $("<div class="item"><h3>Item</h3><input type='text'/><a class="remove" href="#">Remove</a</div>");
new_element.find(".remove").click(function() {
new_element.remove();
});
$('div#main_1').append(new_element);
});
Your problem is that your "Remove" is in an 'a' tag. This causes the page to reload, and removing all of your previous changes.