I have list of options:
<li class="">
<img src="/1.img" />
<img src="/2.img" />
Option 1
</li>
<li class="">
<img src="/1.img" />
<img src="/2.img" />
Option 2
</li>
By default - 1.img visible.
If user select for example Option 1, i want 1.img to hide(); and 2.img to show(); But just for Option 1.
For example this code:
$("#selection li").click(function(){
$('.not-checked').hide(); // to hide image
$('.checked').show(); // to show image
}
Change picture in every li. How can i change picture only on selected li ?
To only target the children of the <li> element you're clicking on, you can make use of jQuery's .find() method. You want to find the img elements, and in order to target specific <img> elements, you can use the :nth-of-type pseudo-class:
$("#selection li").click(function() {
$(this).find('img:nth-of-type(1)').hide(); // to hide image
$(this).find('img:nth-of-type(2)').show(); // to show image
});
img:nth-of-type(2) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selection">
<li class="">
<img src="http://via.placeholder.com/50/ff00000/ff00000" />
<img src="http://via.placeholder.com/50/0000ff/0000ff" /> Option 1
</li>
<li class="">
<img src="http://via.placeholder.com/50/ff00000/ff00000" />
<img src="http://via.placeholder.com/50/0000ff/0000ff" /> Option 2
</li>
</div>
Or you could simply use a 'data-' attribute on all the elements and compare them in jquery.
<div id="selection">
<li class="" data-option="1">
<img src="/1.img" data-option="1">
<img src="/2.img" data-option="2">
Option 1
</li>
<li class="" data-option="2">
<img src="/1.img" data-option="1">
<img src="/2.img" data-option="2">
Option 2
</li> </div>
And from your script
$("#selection li").click(function() {
//first hide all images
$(this).find("img").hide();
//then show only the ones with the right data-option
$(this).find("img[data-option="+$(this).data('option')+"]").show()
});
Btw, you do not always have to use data- it's just a jQuery convention of giving attributes to a tag.
You can use jQuery toggle() to achieve it.
$("li").click(function() {
$(this).find("img").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="">
<img src="http://via.placeholder.com/50/ff00000/ff00000" />
<img style="display:none" src="http://via.placeholder.com/50/0000ff/0000ff" />
Option 1
</li>
<li class="">
<img src="http://via.placeholder.com/50/ff00000/ff00000" />
<img style="display:none" src="http://via.placeholder.com/50/0000ff/0000ff" />
Option 2
</li>
Explanation: $(this) will keep you in the clicked <li>; find("img") will target all of the images inside; toggle() will change the display for any targeted img;
Related
I'm wanting to change the list-style of the li tag after the corresponding image has been clicked. This is what I have got so far.
jsFiddle
$('#foodOrder').click(function() {
$(this " > li").css('list-style', 'disc');
});
#foodOrder {
list-style: circle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="foodOrder"><img id="orderFood" src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" alt="" /><li>CIABATTA</li></span>
<span id="foodOrder"><img id="orderFood" src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" alt="" /><li>BAKERS BUN</li></span>
Fixed your jQuery selector (syntax mistake) and HTML:
<li> must be only in <ul>, <ol> or <menu>.
<span> must contain only Phrasing content, <ul> is Flow content. You should use <div> then.
JSFiddle
$('.foodOrder').click(function() {
$('li', this).css('list-style', 'disc');
});
.foodOrder li {
list-style: circle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="foodOrder">
<img class="orderFood" src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" alt=""/>
<ul>
<li>CIABATTA</li>
</ul>
</div>
<div class="foodOrder">
<img class="orderFood" src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" alt=""/>
<ul>
<li>BAKERS BUN</li>
</ul>
</div>
I have a problem with bxslider. I use javascript to show the slider only when the user clicks on a button. But when the slider is shown no slides are there? When resizing the browser the slides show up. I made a fiddle to show the effect
https://jsfiddle.net/Yq3RM/1051/
and here is the code
<a class="show_figures" id="show_figures" href="javascript:showOrHidefigure(0);" style="text-decoration: none;">
<b>
Show figures
</b>
</a>
<div id="figures" style="display: none">
<ul class="bxslider">
<li>
<img src="http://ebiznet2u.com/wp-content/uploads/2009/06/online-image-tool-psykopaint.gif" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/me_trees.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/houses.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/tree_root.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/trees.jpg" />
</li>
</ul>
</div>
<script type='text/javascript'>
function showOrHidefigure(id_dummy) {
var div = document.getElementById('figures');
var button = document.getElementById('show_figures');
if (div.style.display == "block") {
div.style.display = "none";
button.innerHTML = "<b>Show figures</b>";
} else {
div.style.display = "block";
button.innerHTML = "<b>Hide figures</b>";
}
}
</script>
how can I make the slide show up without resizing the browser?
thanks
carl
I've updated your code a little, basically if you remove display: none from your container and hide it with javascript instead it allows bxslider to calculate the size of the images which I believe it only does after loading when the screen is resized.
https://jsfiddle.net/Yq3RM/1058/
HTML:
<a class="show_figures" id="toggle-figures" href="javascript:;">Show figures</a>
<div id="figures">
<ul class="bxslider">
<li>
<img src="http://ebiznet2u.com/wp-content/uploads/2009/06/online-image-tool-psykopaint.gif" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/me_trees.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/houses.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/tree_root.jpg" />
</li>
<li>
<img src="http://bxslider.com/images/730_200/hill_fence.jpg" />
</li>
</ul>
</div>
JS
var slider = $('.bxslider').bxSlider();
$('#figures').hide();
$('#toggle-figures').on('click', function() {
$('#figures').toggle();
if( $('#figures').is(':visible')) {
$(this).text('Hide figures');
}
else {
$(this).text('Show figures');
}
});
EDIT
Also just a note, don't use b the appropriate element is strong but in this case you should just apply font-weight: bold with css and also avoid using inline styles.
I have a list of images in a slider like so:
<ul>
<li class="dd">one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
There is a button to delete the <li> with the class "dd", so I have this function going on:
function delete(){
$('li.dd').remove();
}
So now that that particulat <li> is deleted, I want the class "dd" to be added to either the <li> I am currently on. I tried adding this:
function delete(){
$('li.dd').remove();
$('li').addClass(' dd')
}
but as you can see, all it does is add the class to all existing <li>s, meaning if I choose to click the delete button again, the entire list is deleted.
I have a pen going on of exactly what I have:
http://codepen.io/anon/pen/gpNwGp
Thank you in advance!
Because you're adding class to all the elements, all the lis will be removed on next click. You can add the class to only first li using following methods.
You can use :first pseudo-selector to select first element.
function delete() {
$('li.dd').remove();
$('li:first').addClass('dd');
// ^^^^^^
}
You can also use first() to get first element
function delete() {
$('li.dd').remove();
$('li').first().addClass('dd');
// ^^^^^^^^
}
You can check updated codepen Demo.
You can use jQuery methods to make it much cleaner
function toggleSlide(direction) {
var $visible = $('.slider > li:visible').hide();
var $ft = $visible[direction ? 'next' : 'prev']();
if (!$ft.length) {
$ft = $('.slider > li')[direction ? 'first' : 'last']();
}
$ft.show();
setIndex();
}
function getVisible() {
return $('.slider > li:visible').index() + 1;
}
function goToEdge(where) {
$('.slider > li:visible').hide();
$('.slider > li')[where ? 'last' : 'first']().show();
setIndex();
}
function addSlide() {
$('ul.slider').append('<li class="hideable"><img src="http://placehold.it/700x100" alt="Sunset" /></li>');
}
function deleteSlide() {
var $visible = $('.slider > li:visible');
toggleSlide(true);
$visible.remove();
}
function setIndex() {
$('#slideNumber').text(getVisible())
}
setIndex();
.hideable {
display: none;
}
img {
width: 640px;
height: 480px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="slider" style="list-style-type:none; margin-left:-2em;">
<li class="hideable dd" style="display: block;">
<img src="http://placehold.it/100x100" alt="hinterground" />
</li>
<li class="hideable">
<img src="http://placehold.it/200x100" alt="Berries" />
</li>
<li class="hideable">
<img src="http://placehold.it/300x100" alt="Cheetah" />
</li>
<li class="hideable">
<img src="http://placehold.it/400x100" alt="Fence" />
</li>
<li class="hideable">
<img src="http://placehold.it/500x100" alt="Paper" />
</li>
<li class="hideable">
<img src="http://placehold.it/600x100" alt="Sunset" />
</li>
<!-- ... and so on -->
</ul>
<!-- Buttons to go back and forth between slides. -->
<form>
<input type="button" id="firstButton" value="First" onclick="goToEdge(false)" />
<input type="button" value="Back" onclick="toggleSlide(false)" />
<input type="button" value="Forward" onclick="toggleSlide(true)" />
<input type="button" id="lastButton" value="Last" onclick="goToEdge(true)" />
<input type="button" value="Add Slide" onclick="addSlide()" />
<input type="button" value="Delete Slide" onclick="deleteSlide()" />
<p>Slide
<!-- you can change "Slide" to Page, Item, etc. --> <span id="slideNumber">
</span>
</p>
</form>
save the next element first to add you class:
function delete(which) {
var next_li = $('li.dd').next();
$('li.dd').remove();
next_li.addClass("dd");
}
i think this might helps you.
good luck.
remember ! do not use .first() because it gives the first li dd class. not the one that is in line.
The li items are clickable divs with data-filter attributes. When clicked, I need jQuery to figure out if any of the li items data-filter attributes match with any divs in the "filteringResults" container. Which will then go on to the "filteringResults" container only showing divs which match with any of the selected li items data-filter attributes.
<li data-filter='clm, ebusiness, seo'>
<div class="itemcontainer">
<img src="site-resources/images/chat-32W.png" alt="">
<div class="tick"></div>
</div>
<p>Engage</p>
</li>
<li data-filter='clm, facebookads, website'>
<div class="itemcontainer">
<img src="site-resources/images/engineering-32W.png" alt="">
<div class="tick"></div>
</div>
<p>Manage</p>
</li>
<ul id="filteringResults">
<li id="clm">CLM</li>
<li id="ebusiness">EBusiness</li>
<li id="seo">SEO</li>
<li id="website">Webite</li>
<li id="facebookads">Facebook Ads</li>
</ul>
Any help would be much appreciated.
Thanks
You can use attribute contains selector like this
$("li").click(function () {
alert($("[data-filter*=" + this.id + "]").data("filter"));
});
Fiddle
I need to change the images on every click using jQuery, lets say while the page loads for the first time it will be img1 and when i click on img1 it will be img2 and again if i click on img2 it will b img 1, and this should go on...
code:
<div>
<span class="myimage">
<img class="img1"src="8A7FA0A1FFEC5443785B9B29AF7629.jpg" alt="" />
<img class="img2"src="abcd.jpg" alt="" />
</span>
<div>
<span>
Hello
</span>
<ul class="myul">
<li>one</li>
<li>Two</li>
</ul>
</div>
<span class="myimage">
<img class="img1"src="8A7FA0A1FFEC5443785B9B29AF7629.jpg" alt="" />
<img class="img2"src="abcd.jpg" alt="" />
</span>
<div>
<span>
r u there
</span>
<ul class="myul">
<li>three</li>
<li>four</li>
</ul>
</div>
</div>
jQuery:
$(document).ready(function() {
$(".myul").hide();
$(".myimage").click(function() {
if ($(".img2").is(":hidden")) {
$(this).next("div").find(".myul").slideToggle(600);
$(".img1").hide();
$(".img2").show();
}
else {
$(this).next("div").find(".myul").slideToggle(600);
$(".img2").hide();
$(".img1").show();
}
});
});
but the probelm is as the class is same both the sections are taking same image.when i am clicking on the first section, only the image for the first section should be changed, how to do taht..any suggestions
You can add the context into your selectors.
For example $(".img1") becomes $(".img1", this)
$(document).ready(function() {
$(".myul").hide();
$(".myimage").click(function() {
if ($(".img2", this).is(":hidden")) {
$(this).next("div").find(".myul").slideToggle(600);
$(".img1", this).hide();
$(".img2", this).show();
}
else {
$(this).next("div").find(".myul").slideToggle(600);
$(".img2", this).hide();
$(".img1", this).show();
}
});
});
You can use selectors to find DOM elements relative to the element that the event was originally fired on.
For example, in this case you can find the children of the span you have attached the 'click' event to:
$(".myimage").click(function() {
if ($(this).children(".img2").is(":hidden")) {
// do something
}