Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
i'm trying to make a script that when i click on a list it add a div inside the tag <li>, this one is ok, but my problem is that when i click in a other <li> i would like remove the div before inserted how can i do that and i would like remove the class .selected as well? Thanks.
$(document).on('click', '#horiz_container img', function() {
var img_selected = $(this);
var value_sport = img_selected.val();
if (!$(this).closest('li').is('.selected')) {
$(this).closest('li').addClass('selected');
$(this).closest('li').prepend('<div class="selected_sport"><img src="' + CI_ROOT +'resources/img/select.png"></div>');
}
});
Try
$(document).on('click', '#horiz_container img', function () {
var img_selected = $(this), $li = img_selected.closest('li');
var value_sport = img_selected.val();
var $selected = $('#horiz_container .selected').removeClass('selected');
$selected.find('.selected_sport').remove();
$li.addClass('selected');
$li.prepend('<div class="selected_sport"><img src="' + CI_ROOT + 'resources/img/select.png"></div>');
});
$(document).on('click', '#horiz_container img', function() {
var img_selected = $(this);
var value_sport = img_selected.val();
if (!$(this).closest('li').is('.selected')) {
$(this).closest('li').addClass('selected');
**$('.selected_sport').remove();**
$(this).closest('li').prepend('<div class="selected_sport"><img src="' + CI_ROOT +'resources/img/select.png"></div>');
}
});
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to check with jquery if the div contains such element before appending. I tried three versions but none of them helped.
Could you please check the commented lines of my code and help me to find the mistake.
var item = $('<div>');
var info = $(''+abc+'');
item.append(info);
var info = $(''+abc+'');
if (!item.contains(info)) { // first version
if (!item.has(info)) { // second version
if (!item.find(info).length() > 0) { // third version
item.append(info);
}
You can find all <a>'s in <div>'s:
var items = $('div a');
Now, if you need just <a>:
if (items == null) { $('div').append('<a></a>'); }
else, if you want find exact <a>, make a for loop:
var exactHref = "http://...";
if (items == null) {
var dummy = 0;
for (i = 0; i < items.length; i++) {
if (items[i].href == exactHref)
{
dummy +=1;
}
}
if(dummy > 0)
{
$('div').append('<a></a>');
}
}
It's not beautiful, but should work.
You can do it like following:
if (item.find('a').length == 0) {
// do your task here
}
You have to use .contains () for that.
var item=$("<div></div>");
var info = $("<a href=''></a>");
item.append (info);
if (item.contains (info))
{
//your code
item.append (info);
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
In javascript/jquery,
button1 clicked > get button1's id by
var button1id= $(this).attr("id");
button2 clicked > get button1id
I'd like to ask how button2 get button1's id?
Thank you!
$(".btn1").click(function() {
var catid = $(this).attr("id");
}
$(".btn2").click(function(){
var catid = $(".subscat").target.attr("id"); //HOW TO GET BTN1's ID??
}
Use:
$(".btn2").click(function(){
var catid = $(".btn1").attr("id");//gets .btn1 id
}
I think you're needing this:
var catid;
$(".btn1").click(function() {
catid = $(this).attr("id");
}
$(".btn2").click(function(){
alert(catid);//catid will be .btn1 id only after clicking .btn1
// else undefined will be returned
}
Use this:
$(".btn2").click(function(){
var catid = $(".btn1").attr("id");
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I wrote a code that transform each word in an article to a link, and i wanted to apply onclick() function on the new anchors but the code is not working..
here is the javascript code:
<script>
var tarea = document.getElementById("t");
var div = document.getElementById('res');
var article = tarea.innerHTML;
var i=0;
while(i<500 ){
var ind = article.indexOf(" ");
var curr = article.substring(0,ind);
article = article.substring(article.indexOf(" ")+1);
anch = "<a class='link' id='link' href='#' >" + curr+"</a>";
div.innerHTML = div.innerHTML + " " + anch;
i++;
}
var element = document.getElementById('link');
element.onclick = function () {
alert(element.innerHTML);
};
</script>
This is called event delegation. It can get complicated, but this is the basic concept. You can use anything that can identify the element, but I just used id here since that is the most simple.
var MY_DYNAMIC_EL_ID = 'dynamic';
window.addEventListener('click', function(e) {
var el = e.srcElement || e.target;
if(el.id == MY_DYNAMIC_EL_ID) {
alert('clicked');
}
}
var el = document.createElement('div');
el.id = MY_DYNAMIC_EL_ID;
document.body.appendChild(el);
http://jsfiddle.net/B7Ja9/6/
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I would like to know, how to create selector, that links to dynamically created element, without using event on the dynamically created element?
NOTE: dynamically created element I mean element, that is not in HTML at the beginning
I know that I can use $(this), when I have event (for example .click) on the element, but when I don't have event and I need selector on the dynamically created element?
Thanks to all.
update: Here is my situation:
$(".product div a").click(function() {
var nameOfProduct = $(this).parent().find("h3").text();
var dataPrice = parseInt($(this).parent().find("div b").text());
var isProductIn = false;
var itemsInDay = $(/*HERE I NEED THE SELECTOR*/).find("div.item").nextUntil("div.center");
itemsInDay.each(function () {
if (nameOfProduct == ($(this).find("span ins span").text())) {isProductIn = true;};
});
if (isProductIn) {
//add only +1, not new product again;
} else {
var imgOfProduct = $(this).parent().parent().find("img").attr('src').replace('med', 'min');
var product = ('<div class="item" data-price="' + dataPrice + '"><img src="' + imgOfProduct + '"><span><ins><b>1x</b> ' + nameOfProduct + '</ins><img src="images/delete.png"></span></div>');
$(product).appendTo(".dayOrder:last").delay(800).hide().slideDown();
}
return false;
});
Try something lihe this http://jsfiddle.net/pEb7D/5/
HTML:
<div class="test"></div>
Javascript:
dynamicSelector = $('.test').append('<div class="newElement">Hello!</div>');
setTimeout(function () {
dynamicSelector.text('Goodbye!');
}, 3000);
UPDATE:
OK, so you're putting the items into the .orderDay:last element. There you could loop through it's contents and see if you already have an existing element of one or other type.
However I would recommend making an array according to the product ID and then reacting to that.
For example http://jsfiddle.net/8byQp/
Javascript:
daysOrderArray = [];
$(".product div a").click(function() {
var nameOfProduct = $(this).parent().find("h3").text();
var imgOfProduct = $(this).parent().parent().find("img").attr('src').replace('med', 'min');
var dataId = $(this).parent().parent().data("id");
var dataPrice = parseInt($(this).parent().find("div b").text());
priceSum += dataPrice;
updatePrice(priceSum);
if(dataId in daysOrderArray){
// Now add number rather than new product.
daysOrderArray[dataId]++;
$('.item[data-id="' + dataId + '"] .quantity').text(daysOrderArray[dataId]);
} else {
daysOrderArray[dataId] = 1;
var product = ('<div class="item" data-id="' + dataId + '" data-price="' + dataPrice + '"><img src="' + imgOfProduct + '"><span><ins><b><span class="quantity">1</span>x</b> ' + nameOfProduct + '</ins><img src="images/delete.png"></span></div>');
$(product).appendTo(".dayOrder:last").delay(800).hide().slideDown();
return false;
}
});
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have narrowed it down to the line that declares the 'position'
$(document).ready(function(){
var sliders = new Array("#left","#middle","#right");
var links = new Array("#fLink","#sLink","#tLink");
$(".link").click(function(){
var position = $("#" + sliders[links.indexOf("#" + this.id)]).position().left();
alert(position);
$(".slider").animate({left:gap}, 1500);
});
});
sliders already has the # in it, you don't want to add it again when using it within $(), you end up passing "##left" in as the selector string. Also note that left is a value, not a function, so no () after it.
So:
var position = $("#" + sliders[links.indexOf("#" + this.id)]).position().left();
// Remove -------^^^^^^ and -------------------------------------------------^^
For what you're doing, I wouldn't use a pair of arrays, I'd use:
A lookup object, or
A naming convention, or
A data-* attribute
The last two are trivial, but here's how that first one would work:
$(document).ready(function () {
var sliders = {
"fLink": "#left",
"sLink": "#middle",
"tLink": "#right"
};
$(".link").click(function () {
var sliderSel = sliders[this.id];
if (sliderSel) {
var position = $(sliderSel).position().left;
alert(position);
$(".slider").animate({
left: gap
}, 1500);
}
});
});
Side note: Is gap defined somewhere in code you haven't shown? If not, you'll want to do that.