We Keep Coding

Click event on a link with a unique id

On a page I have links, by clicking them, it deletes an element. This is my code:
Delete input
Delete input
and so on. As you can see, the links differs with ids, so there can be hundreds links with unique ids. I need to remove closest li element to them. I do it in a such way:
$(document).ready(function () {
$('#link0').click(function (e) {
e.preventDefault();
$(this).closest('li').remove();
})
});
It works for id="link0"
I tried to put a numerical part of id into a variable i by doing this:
var i = 0;
$('#link0' + i).click(function (e) {
e.preventDefault();
$(this).closest('li').remove();
})
but I can't figure, how to make it work and how should I increment i(where should I put in the code i++). Any help would be appriciate. Thanks!

You can use classes instead of ids...
You can do it like this:
$(document).ready(function() {
$('.remove-existed-field').on('click', function(e) {
$(this).closest('li').remove();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>Delete input</li>
<li>Delete input</li>
Hope this helps!

You could use the starts with selector.
$('[id^=link]').click(
It will target all the elements whose id start with link

If you want to process each link a then you could do it on class instead.
Also you can get id of the clicked link if you really need it.
$(document).ready(function () {
$('a.remove-existed-field').click(function (e) {
e.preventDefault();
// $(this).attr('id');
$(this).closest('li').remove();
});
});

add and remove class on same button or element

I'm looking for a way to add and remove class on the same button. So far this is my work in progress. The concept is when I click on the menu button it shows the menu. When I tap on the menu button again. The menu hides
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').addClass('show');
});
});

To achieve this you can use .toggleClass() like so:
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});
JsFiddle example
toggleClass
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added.
For more information about this function check here
Hope this helps!

You should use $(this) and toggleClass
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$(this).toggleClass('show');
});
});
which will add the class back to the specific element that was clicked.
http://api.jquery.com/toggleclass/
http://www.learningjquery.com/2007/08/what-is-this

Try this:
$(document).ready(function(){
$('button.toggle-portfolio').on('click', function(e){
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});

DEMO
$('.toggle-portfolio').on('click', function(e) {
$('.portfolio-contact-form-wrap').toggleClass('show');
});
Try this way

You can use .add() method with .toggleClass():
$(document).ready(function() {
$('button.toggle-portfolio').on('click', function(e) {
$('.portfolio-contact-form-wrap').add(this).toggleClass('show');
});
});
.portfolio-contact-form-wrap {
color:blue;
}
.show {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-portfolio">Button</button>
<div class="portfolio-contact-form-wrap">
<h1>contact form</h1>
</div>

Use toggleClass('show')
It will add the class on one click and remove the class on the second click.

<script>
$(document).ready(function () {
$('button.toggle-portfolio').on('click', function (e) {
$('.portfolio-contact-form-wrap').toggleClass('show');
});
});
</script>

JQuery hover doesnt work

I got a JQuery hover but it doesnt show. The dimmed-item class, is what I would like to add on to the kunden-item class. Bouth of them allready work if I manuely put them in. JQuery is allready in the File so there must be some logic mistake I made.
Here my HTML for 1 Element:
<div class="kunden-item kunde2-item">
<img class="kunde" src="<?php echo $params->get('image2');?>" alt="Kunde">
</div>
Here my JQuery:
$(document).ready(function(){
$("kunden-item")
.mouseenter(function() {
$(this).addClass("dimmed-item");
})
.mouseleave(function() {
$(this).removeClass("dimmed-item");
});
});

kunden-item is a class, so your selector needs a leading .:
$(".kunden-item")
.mouseenter(function() {
$(this).addClass("dimmed-item");
})
.mouseleave(function() {
$(this).removeClass("dimmed-item");
});
});
Also note that you can massively shorten your code by using hover() and toggleClass():
$(".kunden-item").hover(function() {
$(this).toggleClass('dimmed-item');
});
Or just by using CSS alone:
.kunden-item:hover {
opacity: 0.5; // for example only, apply whatever style you need here
}

Class selectors begin with a .
You have a type selector and are trying to match <kunden-item> elements.
You should have:
$(".kunden-item")
You can probably get rid of the JS entirely and just use a :hover rule in your stylesheet though.

You're missing a dot (.) before kunden-item. You can also use .hover(), which works like this:
$(document).ready(function(){
$(".kunden-item")
.hover(function() {
$(this).addClass("dimmed-item");
},
function() {
$(this).removeClass("dimmed-item");
});
});

Jquery hide div and show div

I have my code on jsfiddle which has 2 divs, where the user can select features by clicking on a div. in the opposite div i have the same item but hidden. how can i replace the hidden class?
this is what i have come up with:
$("#Label1").click(function () {
$(this).find('.feature-options1').addClass('hidden');
$(this).parent().closest('.feature-container').prev().find('#SelectedFeatures').find('#Label2').removeClass('hidden');
});
http://jsfiddle.net/X6xcj/9/

is this:
$(this).find('.feature-options1').hide();
$('#label2').find('.feature-options1').show();
what you are trying to achieve?

$("#Label1").click(function () {
$(this).find('.feature-options1').addClass('hidden');
$(this).parent().next().next().find('#Label2').removeClass('hidden');
});
Try this i may help you.

You should use .parent() not .prev() to get the containing div
$("#Label1").click(function () {
$(this).find('.feature-options1').addClass('hidden');
$(this).parent().closest('.feature-container').parent().find('#SelectedFeatures').find('#Label2').removeClass('hidden');
});
Here you go: http://jsfiddle.net/5W48X/
.prev() gives you the previous sibling element.
.parent() gives you the container (parent) element.
EDIT:
I had not even seen the id's you use on divs yet. This should work as well:
$("#Label1").click(function () {
$(this).addClass('hidden');
$('#Label2').removeClass('hidden');
});
http://jsfiddle.net/6Zbsa/

try this:
$(function(){
$(".feature-addons").on('click', function(e){
var lbl = $(this).next();
$(".feature-addons").next().addClass('hidden');
lbl.removeClass('hidden');
});
});

Javascript , jQuery - what have I done wrong?

$(document).ready(function () {
$("href").attr('href', 'title');
});
$('a[href$=.jpg]').each(function () {
var imageSrc = $(this).attr('href');
var img = $('<img />').attr('src', imageSrc).css('max-width', '300px').css('max-height', '200px').css('marginBottom', '10px').css('marginTop', '10px').attr('rel', 'lightbox');
$(this).replaceWith(img);
});
});
This is the jQuery code I have at the moment, which I want to change all links' href to the same as their title, before then embedding them in the page. Yet with the changing href to title bit in the code, it stops working. I'm new to Javascript so am definitely doing something wrong, just not sure what yet! Any help much appreciated!
Thank you guys
EDIT
This is the html that I want to change:
<p class="entry-content">Some interesting contenthttp://example.com/index.php/attachment/11</p>

You are changing it wrong, you are trying to select href elements instead of a.
This fix should do it:
$("a[title]").each(function() {
$(this).attr('href',$(this).attr('title'));
});
It will select all a elements with title and set the href with this value.

Here's a much more efficient way.
Since you're just replacing the <a> elements, there's really no need to change its href. Just select the <a> elements that end with jpg/jpeg, and use that attribute directly.
Example: http://jsfiddle.net/5ZBVf/4/
$(document).ready(function() {
$("a[title$=.jpg],[title$=.jpeg]").replaceWith(function() {
return $('<img />', {src:this.title, rel:'lightbox'})
.css({maxWidth: 300,maxHeight: 200,marginBottom: 10,marginTop: 10});
});
});​
Your .each() is outside the .ready() function.
You can accomplish the href change easily like this:
$(document).ready(function () {
$("a").attr('href', function() { return this.title; });
});
The .attr() method will accept a function where the return value is the new value of (in this case) href.
So the whole thing could look like this:
Example: http://jsfiddle.net/5ZBVf/3/
$(document).ready(function() {
$("a[title]").attr('href', function() { return this.title; })
.filter('[href$=.jpg],[href$=.jpeg]')
.replaceWith(function() {
return $('<img />', {src:this.href, rel:'lightbox'})
.css({maxWidth: 300,maxHeight: 200,marginBottom: 10,marginTop: 10});
});
});

This line:
$("href").attr('href','title');
Is finding all href elements and replacing their href attr with the string 'title'. Since there is no such thing as an href element, Try this instead:
// for every anchor element on the page, replace it's href attribute with it's title attribute
$('a').each(function() {
$(this).attr('href', $(this).attr('title');
});

Check this out: http://jsfiddle.net/TbMzD/ Seems to do what you want.
Note: $(document).ready() is commented because of jsfiddle, you actually need it in your code.

Try:
$("a").each(function () {
var $this = $(this);
$this.attr('href', $this.attr('title'));
});