Help Needed
I have some sets of divisions available, where all of the div's are with the same classes. Each div contains a button and some other div's.
<div class="red box border">
<button class="changecolo">change</button>
<div class="sb">t</div>
<div class="box-small yellow">A</div>
</div>
<div class="red box border">
<button class="changecolo">change</button>
<div class="sb">t</div>
<div class="box-small yellow">A</div>
</div>
<div class="red box border">
<button class="changecolo">change</button>
<div class="sb">t</div>
<div class="box-small yellow">A</div>
</div>
and the css used
.box {
width:100px;
height:100px;
display:block;
margin:5px;
float:left;
}
.box-small {
width:20px;
height:20px;
display:block;
margin:5px;
float:left;
}
.sb {
width:10px;
height:10px;
display:block;
margin:5px;
float:left;
}
.red {background-color:red;}
.yellow {background-color:yellow;}
.border{border:1px solid #000;}
Now, when i click on the button inside the div, the div with 'box-small' class has to be changed. It works with the following jQuery.
$('.changecolo').click(function () {
var $this = $(this);
$this.closest(function(){
$('.box-small').removeClass('yellow');
$('.box-small').addClass('red');
});
});
but the problem is when i click on the button, styles for all the divs are changing. I want to change the current divs class only.
You can find the Fiddle for the same here http://jsfiddle.net/om749rbd/6/
Your valuable help will be appreciated. Thanks
Your use of closest() is incorrect, try giving it a selector instead of a function. From there you can use $this.find() to get the .box-small elements. You can also use toggleClass() to change between the classes on each successive click. Try this:
$('.changecolo').click(function () {
var $this = $(this);
$this.closest('.box').find('.box-small').toggleClass('yellow red');
});
Updated fiddle
In your click event handler add the following code.
$(this).closest('.box').find('.box-small').removeClass('yellow').addClass('red');
This will find the closest parent having class box and then find the descendant having class box-small and then change the class of this element.
Demo
$('.changecolo').click(function() {
$(this).closest('.box').find('.box-small').removeClass('yellow').addClass('red');
});
.box {
width: 100px;
height: 100px;
display: block;
margin: 5px;
float: left;
}
.box-small {
width: 20px;
height: 20px;
display: block;
margin: 5px;
float: left;
}
.sb {
width: 10px;
height: 10px;
display: block;
margin: 5px;
float: left;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.border {
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="red box border">
<button class="changecolo">change</button>
<div class="sb">t</div>
<div class="box-small yellow">A</div>
</div>
<div class="red box border">
<button class="changecolo">change</button>
<div class="sb">t</div>
<div class="box-small yellow">A</div>
</div>
<div class="red box border">
<button class="changecolo">change</button>
<div class="sb">t</div>
<div class="box-small yellow">A</div>
</div>
Use .siblings() in jquery .closest() is not work in your context.
$('.changecolo').click(function () {
var $this = $(this);
$this.siblings('.box-small').removeClass('yellow').addClass('red');
});
or
$('.changecolo').click(function () {
var $this = $(this);
$this.siblings('.box-small').toggleClass('yellow red');
});
Fiddle
Use can use $this selector(if HTML structure doesnt change) to get the next sibling like this:
$('.changecolo').click(function () {
var $this = $(this);
$this.closest(function(){
$this.next().next().removeClass('yellow');
$this.next().next().addClass('red');
});
});
Update fiddle:
http://jsfiddle.net/om749rbd/11/
Try using $(this).closest() to get the parent div and then target the specific div using find()
Check the CODE
$('.changecolo').click(function () {
var $this = $(this);
var boxSmall = $this.closest('div').find('.box-small');
boxSmall.removeClass('yellow').addClass('red');
});
$('.changecolo').click(function () {
var that = $(this).siblings('.box-small');
$(that).removeClass('yellow');
$(that).addClass('red');
});
updates demo
try this
Script
$('.changecolo').click(function () {
$(this).closest('.box').find('.box-small').removeClass('yellow').addClass('red');
});
Related
I need some help please with 'syncing' the toggleClass ".selected" between two divs with children that have the same "data-slide-index" values.
Each ".ProductItem-gallery-slides-item" can toggle the class ".selected". But, I was wondering if there was a way for each ".ProductItem-gallery-thumbnails-item" to observe and mimic the toggleClass ".selected" onto the corresponding "data-slide-index" value. I do not wish for each ".ProductItem-gallery-thumbnails-item" to be clickable or hoverable as these are static items.
And so, is there a way for each ".ProductItem-gallery-thumbnails-item" to toggleClass ".selected" when each ".ProductItem-gallery-slides-item" has ".selected" toggled?
.ProductItem-gallery,
.ProductItem-gallery-scroll,
.ProductItem-gallery-thumbnails,
.ProductItem-gallery-thumbnails-item,
.ProductItem-gallery-slides,
.ProductItem-gallery-slides-item {
border: 2px solid #000000;
margin: 10px;
padding: 10px;
}
.ProductItem-gallery {
border-color: yellow;
}
.ProductItem-gallery-scroll {
border-color: green;
}
.ProductItem-gallery-thumbnails {
border-color: orange;
}
.ProductItem-gallery-slides {
border-color: blue;
}
.selected {
color: red;
}
.ProductItem-gallery-next {
float: right;
}
<section class="ProductItem-gallery">
<div class="ProductItem-gallery-scroll">
<div class="ProductItem-gallery-thumbnails">
<div class="ProductItem-gallery-thumbnails-item" data-slide-index="1">Thumbnail one</div>
<div class="ProductItem-gallery-thumbnails-item" data-slide-index="2">Thumbnail two</div>
<div class="ProductItem-gallery-thumbnails-item" data-slide-index="3">Thumbnail three</div>
</div>
</div>
<div class="ProductItem-gallery-slides">
<div class="ProductItem-gallery-carousel-controls">
<button class="product-item-gallery-carousel-control ProductItem-gallery-prev" data-product-gallery="prev" aria-label="Previous">Previous</button>
<button class="product-item-gallery-carousel-control ProductItem-gallery-next" data-product-gallery="next" aria-label="Next">Next</button>
</div>
<div class="ProductItem-gallery-slides-item selected" data-slide-index="1"> Item one </div>
<div class="ProductItem-gallery-slides-item" data-slide-index="2"> Item two </div>
<div class="ProductItem-gallery-slides-item" data-slide-index="3"> Item three </div>
</div>
</section>
You could achieve this with jQuery by defining an event handler for the click event and get in that handler the data-slide-index attribute of the clicked element:
const slide_index = $(this).data('slide-index');
Then you could use this value to select the belonging thumbnail:
$('.ProductItem-gallery-thumbnails-item[data-slide-index="' + slide_index + '"]').addClass('selected');
Working example:
const thumbnails_items = $('.ProductItem-gallery-thumbnails-item');
const slides_items = $('.ProductItem-gallery-slides-item');
slides_items.on('click', function() {
const slide_index = $(this).data('slide-index');
slides_items.removeClass('selected');
thumbnails_items.removeClass('selected');
$(this).addClass('selected');
$('.ProductItem-gallery-thumbnails-item[data-slide-index="' + slide_index + '"]').addClass('selected');
});
.ProductItem-gallery,
.ProductItem-gallery-scroll,
.ProductItem-gallery-thumbnails,
.ProductItem-gallery-thumbnails-item,
.ProductItem-gallery-slides,
.ProductItem-gallery-slides-item {
border: 2px solid #000000;
margin: 10px;
padding: 10px;
}
.ProductItem-gallery {
border-color: yellow;
}
.ProductItem-gallery-scroll {
border-color: green;
}
.ProductItem-gallery-thumbnails {
border-color: orange;
}
.ProductItem-gallery-slides {
border-color: blue;
}
.selected {
color: red;
}
.ProductItem-gallery-next {
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="ProductItem-gallery">
<div class="ProductItem-gallery-scroll">
<div class="ProductItem-gallery-thumbnails">
<div class="ProductItem-gallery-thumbnails-item" data-slide-index="1">Thumbnail one</div>
<div class="ProductItem-gallery-thumbnails-item" data-slide-index="2">Thumbnail two</div>
<div class="ProductItem-gallery-thumbnails-item" data-slide-index="3">Thumbnail three</div>
</div>
</div>
<div class="ProductItem-gallery-slides">
<div class="ProductItem-gallery-carousel-controls">
<button class="product-item-gallery-carousel-control ProductItem-gallery-prev" data-product-gallery="prev" aria-label="Previous">Previous</button>
<button class="product-item-gallery-carousel-control ProductItem-gallery-next" data-product-gallery="next" aria-label="Next">Next</button>
</div>
<div class="ProductItem-gallery-slides-item selected" data-slide-index="1"> Item one </div>
<div class="ProductItem-gallery-slides-item" data-slide-index="2"> Item two </div>
<div class="ProductItem-gallery-slides-item" data-slide-index="3"> Item three </div>
</div>
</section>
How to make that when clicking on the link the color of the img div border changed? And the text is returned back to "not selected Click"?
$('.div').click(function() {
if ( !($(this).hasClass('selected')) ) {
$(this).addClass('selected');
$(this.nextElementSibling).text('selected text');
} else {
$(this).removeClass('selected');
$(this.nextElementSibling).text('not selected');
}
});
.div {
width: 100px;
height: 100px;
border: 1px solid blue;
cursor: pointer;
}
.selected {
border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div><p class="p">not selected Click </p>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div><p class="p">not selected Click</p>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div><p class="p">not selected Click</p>
This is a quick solution based on what you are already using. The link is embedded in the p so you have to use parent(), and prev() is the jQuery equivalent to nextElementSibling and returns a jQuery object.
You can notice that i used $('body').on('click', 'a.clicked', function) instead of $('a.clicked').click(function), it is in case you wan to add again a link in the text dynamically. With click, only the ones already present at page loding will be targeted. With on('click'), dynamically created elements will too.
As a note, your solution relies on elements position, which is maybe not the safest way to do. Using a wrapper with a class to access all elements from classes would be a bit better.
$('.div').click(function() {
if ( !($(this).hasClass('selected')) ) {
$(this).addClass('selected');
$(this.nextElementSibling).text('selected text');
} else {
$(this).removeClass('selected');
$(this.nextElementSibling).text('not selected');
}
});
$('body').on('click', 'a.clicked', function(e) {
e.preventDefault();
if ( !($(this).parent().prev().hasClass('selected')) ) {
$(this).parent().prev().addClass('selected');
$(this).parent().text('selected text');
} else {
$(this).parent().prev().removeClass('selected');
$(this).parent().text('not selected');
}
});
.div {
width: 100px;
height: 100px;
border: 1px solid blue;
cursor: pointer;
}
.selected {
border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div><p class="p">not selected Click </p>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div><p class="p">not selected Click</p>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div><p class="p">not selected Click</p>
You may create a span inside the p and you change text only of span and you keep the a. Then you can show/hide the a.
after that create the same event for the a where you target the div using prev() and you do the same logic (it can be simplified in this case):
$('.div').click(function() {
if (!($(this).hasClass('selected'))) {
$(this).addClass('selected');
$(this.nextElementSibling).find('span').text('selected text');
$(this.nextElementSibling).find('a').hide();
} else {
$(this).removeClass('selected');
$(this.nextElementSibling).find('span').text('not selected');
$(this.nextElementSibling).find('a').show();
}
});
$('a.clicked').click(function() {
var elem = $(this).parent().prev();
elem.addClass('selected');
elem.next().find('span').text('selected text');
elem.next().find('a').hide();
});
.div {
width: 100px;
height: 100px;
border: 1px solid blue;
cursor: pointer;
}
.selected {
border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div>
<p class="p"><span>not selected</span> Click </p>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div>
<p class="p"><span>not selected</span> Click</p>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div>
<p class="p"><span>not selected</span> Click</p>
You can use css selector for this
.div {
width: 100px;
height: 100px;
border: 1px solid blue;
cursor: pointer;
}
.div-class:active {
border-color: red;
}
If you are using scss, you make the css much more clean
.div {
width: 100px;
height: 100px;
border: 1px solid blue;
cursor: pointer;
&:active {
border-color: red;
}
}
Considering the limitations of the existing html structure:
the DOM will need to be traversed up to the containing (parent)
element using the .parent() method Ref jQuery API,
then stepping one element back, from the containing (parent)
element, using the .prev() method Ref jQuery API, as
demonstrated in the code snippet embedded below...
Note: in addition, the .next() method Ref jQuery API has been used as a replacement to the vanilla javascript .nextElementSibling read-only property.
Code Snippet Demonstration:
$('.div').click(function() {
if (!$(this).hasClass('selected')) {
$(this).addClass('selected');
$(this).next().text('selected text');
} else {
$(this).removeClass('selected');
$(this).next().text('not selected');
}
});
$('.clicked').click(function() {
if (!$(this).parent().prev('.div').hasClass('selected')) {
$(this).parent().prev('.div').addClass('selected');
$(this).parent().text('selected text');
} else {
$(this).removeClass('selected');
$(this).parent().text('not selected');
}
});
.div {
width: 100px;
height: 100px;
border: 1px solid blue;
cursor: pointer;
}
.selected {
border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div>
<p class="p">not selected Click</p>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div>
<p class="p">not selected Click</p>
<div class="div" style="background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg)"></div>
<p class="p">not selected Click</p>https://stackoverflow.com/questions/48278544/how-to-make-that-when-clicking-on-the-link-the-color-of-the-border-changed#
I want to create a functionality where when I click the data in Textbox1 (the data is basically a button with "tick" as shown in the image link below), then the data should be transferred to TextBox2 and should no longer appear in TextBox1.
Also from Textbox2 if I click the data (button with "X" image), then again the data should be transferred from TextBox2 to Textbox1 and Textbox2 should no longer contain the data.
I am working on dojo. But it would be fine if the answers are not related to dojo.
I wanted to know if there are any features available in dojo for this.
A javascript hint would also be helpful :)
$(document).ready(function() {
$("body").on("mouseover", ".opt", function(e) {
$(this).attr({color: "#0000ff"});
});
$("body").on("click", ".opt", function(e) {
var _divOpt;
var _parent = $(this).parent().attr("class");
var _index = $(this).index();
var _html = $('<a/>')
.attr({
"class": "opt",
"href": "javascript:void(0)"
})
.append($(this).clone())
.html();
if ("div1" === _parent) {
$(".div2").append(_html);
} else {
$(".div1").append(_html);
}
$(this).remove();
});
})
* {
font-family: "arial";
font-size: 12px;
color: #FF0000;
}
.wrapper {
float: left;
width: 100%;
}
.option-close{
margin-left:50px;
}
.div1,
.div2 {
float: left;
width: 30%;
height: 70%;
padding: 5px;
margin: 5px;
}
a div{
float:left;
width:100%;
text-align:center;
}
a {
padding: 5px;
margin: 5px;
border: 1px solid #cccccc;
float: left;
width:70%;
}
a:hover, div:hover, div:hover{
color: #0000FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="div1">
<a class="opt" href="javascript:void(0);">
<div class="option_value">Option 1</div>
</a>
<a class="opt" href="javascript:void(0);">
<div class="option_value">Option 2</div>
</a>
<a class="opt" href="javascript:void(0);">
<div class="option_value">Option 3</div>
</a>
</div>
<div class="div2">
</div>
</div>
I have the following code to show and hide a div but if I want to click on the image I can add the class but if I want to remove it by clicking the image then it will open it again. Can anyone explain to me how this works?
https://jsfiddle.net/bmhv3edw/
$(document).ready(function() {
function close_answer_section() {
$('.question-text').removeClass('active');
$('.answer-section-content').slideUp(300).removeClass('open');
}
$('.question-text').click(function(e) {
var currentAttrValue = $(this).attr('href');
if($(e.target).is('.active')) {
close_answer_section();
}else {
close_answer_section();
$(this).addClass('active');
$('.questions ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
You can see that when you clicked on the img, the e.target is <img>, as it don't have class .active, it'll always trigger the false part.
Solution, change
if($(e.target).is('.active')) {
to
if($(this).is('.active')) {
See jsFiddle
You can greatly simplify your logic by using slideToggle() on the current .answer-section-content, and slideUp() on all the rest:
$('.question-text').click(function() {
var answer= $(this).next('.answer-section-content');
answer.slideToggle(300);
$('.answer-section-content').not(answer).slideUp(300);
});
This allows you to remove the ids from the answers and the hrefs from the divs.
$(document).ready(function() {
$('.question-text').click(function() {
var answer= $(this).next('.answer-section-content');
answer.slideToggle(300);
$('.answer-section-content').not(answer).slideUp(300);
});
});
body{ background: black };
.questions{
padding-top: 25px;
padding-left: 170px;
padding-bottom: 25px;
}
.question{
padding: 5px;
font-size: 18px;
font-weight: 100;
color: #ffffff;
}
.answer-section-content {
display:none;
padding: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questions">
<div class="question">
<div class="question-text">
<img src="images/plus-eclipse.png">Question 1</div>
<div class="answer-section-content">
<p>Answer 1</p>
</div>
</div>
<div class="question">
<div class="question-text">
<img src="images/plus-eclipse.png" />Question 2</div>
<div class="answer-section-content">
<p>Answer 2</p>
</div>
</div>
</div>
i'd like to know what i should do to show only one div out of multiple divs with the same classname. If one is open and i click another, the one that is open should close, and the one that i clicked on should open.
HTML:
<div class="out">
<div class="content"> <a>click here to learn more..</a>
</div>
</div>
<div class="out">
<div class="content"> <a>click here to learn more..</a>
</div>
</div>
<div class="out">
<div class="content"> <a>click here to learn more..</a>
</div>
</div>
CSS:
.out {
width:150px;
height: 25px;
background-color: green;
float: left;
margin-right:10px;
}
.open {
border-bottom:5px solid peru;
height: 150px;
}
.out.open .content {
width:100%;
height:100%;
}
a {
display: none;
}
.open .content {
display: block;
}
.open .content > a {
color: white;
text-decoration: underline;
display: block;
}
JS:
$(document).ready(function () {
$('.out').click(function () {
$('.out').find('open').removeClass('open');
$(this).addClass('open');
});
});
I know the problem is in the jquery, but i have no clue of what i'm doing wrong.
Here's a fiddle too: http://jsfiddle.net/4hpgb/22/
Just change this line:
$('.out').find('open').removeClass('open');
to this:
$('.out').removeClass('open');
It should work.
What is happening is that you're removing all classes open from all div.out, then adding class open to the current one.
JSFIDDLE DEMO
$('.out').click(function () {
$('.out').removeClass('open');
$(this).toggleClass('open');
});
Write:
$('.out').click(function () {
if(!($(this).hasClass('open'))){
$('.out.open').removeClass('open');
}
$(this).addClass('open');
});
Updated fiddle here.
Close all the open divs first
$(document).ready(function () {
$('.out').click(function () {
$('.out').find('open').removeClass('open');
$('.open').each(function(i,v){
$(this).removeClass('open');
});
$(this).addClass('open');
});
});
Demo here