How would I toggle this divs .pane-content without toggling another with same class?
HTML:
<div class="pane">
<div class="pane-header">Settings
<div class="pane-controls">
<span class="pane-toggle"><i class="fa fa-chevron-up"></i></span>
<i class="fa fa-times"></i>
</div>
<div style="clear:both;"></div>
</div>
<div class="pane-content">
Loreum Ipsum
</div>
</div>
JS:
$('.pane-toggle').click(function () {
$('.pane-content').toggle('fast');
$("i", this).toggleClass("fa-chevron-down fa-chevron-up");
});
Try -
$('.pane-content',$(this).closest('.pane')).toggle('fast');
Demo -----> http://jsfiddle.net/t5kM7/1/
Related
I have a div object that should be clickable when it contains the class "clickable". In the Click function I remove the "clickable" class, but it still fires when clicking the object. Will it continue to fire even when I remove the class?
HTML:
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>
jQuery:
$("div.vote-wrap > div.circle.clickable").click(function () {
let $circle = $(this);
$circle.removeClass("clickable");
}
because you didn't unbind the event in the click callback.
You just remove the class.
$("div.vote-wrap > div.circle.clickable").click(function() {
let $circle = $(this);
$circle.removeClass("clickable");
$(this).unbind('click');//unbind the click event
alert('clicked , and unbind now!');
})
div.vote-wrap > div.circle.clickable {
background:pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">click me
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>
and another way:
$("div.vote-wrap").on('click','div.circle.clickable',(function() {
let $circle = $(this);
$circle.removeClass("clickable");
alert('clicked');
}))
div.vote-wrap > div.circle.clickable {
background:pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">click me
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>
Use delegate event on() and unbind the click event with unbind('click') for dynamically created element.
$("div.vote-wrap > div.circle.clickable").on('click',function () {
let $circle = $(this);
$circle.removeClass("clickable");
$circle.unbind('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>
The element event handler is attached to is determined when listener is attached, not when the event is emitted.
you could rewrite that code like this:
// element instance is captured once
var $elem = $("div.vote-wrap > div.circle.clickable")
$elem.click(function () {
let $circle = $(this)
$circle.removeClass("clickable")
})
For solution to your problem check the answers of this question: Event binding on dynamically created elements?
I have a bit long info submission form. I have an option that someone click "add another", there is a notification box display with text like "Success!" like that with close button. Please check this image.
Therefore I have three "add another" buttons and three success alerts. When someone click close, that alert message needs to be disappear.
The problem
I used javascript for that success box. It does these things.
Click "Add another" button, appears success box. Click close button on
success box, box disappears.
Here is my code.
document.querySelector(".add-box").addEventListener("click", function() {
document.querySelector(".add-box-wrap").style.display = "inline-block";
});
document.querySelector(".add-box1").addEventListener("click", function() {
document.querySelector(".add-box-wrap1").style.display = "inline-block";
});
document.querySelector(".add-box2").addEventListener("click", function() {
document.querySelector(".add-box-wrap2").style.display = "inline-block";
});
$(".claim-btn-close").click(function() {
$(".add-box-wrap").hide();
});
$(".claim-btn-close1").click(function() {
$(".add-box-wrap1").hide();
});
$(".claim-btn-close2").click(function() {
$(".add-box-wrap2").hide();
});
<!-- This goes end of html page -->
function hide(target) {
document.getElementsByClassName(target).style.display = 'none';
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Success form-->
<div class="add-box-wrap">
<div class="claim-btn-close" onclick="hide('.claim-btn-close')">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
<a class="add-box">Add another<i class="fa fa-plus"></i></a>
</div>
See.. there is a major problem with code repeating. (I didn't repeat html codes, just post here one example) I would like to know the best practice to achieve things like this.
For displaying the notification box without repeating the code, one of the way is you could make use of data attributes. Change the data attribute for all the buttons and let the class .add-box be the same. like so:
<div class="add-box-wrap1" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<div class="add-box-wrap2" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
<a class="add-box" data-target="1">Add another<i class="fa fa-plus"></i></a>
</div>
<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
<a class="add-box" data-target="2">Add another<i class="fa fa-plus"></i></a>
</div>
And change your Jquery to just one function.
$(".add-box").click(function() {
$(".add-box-wrap" + $(this).data('target')).show(); //.add-box-wrap1 or .add-box-wrap2
});
Explanation of the above line: It just means we are getting the value of the "clicked" button's data-target value(which is 1 or 2) AND appending that value to the "add-box-wrap"(which will be add-box-wrap1 or add-box-wrap2) to search for that element to display it using .show().
Using show() or .css jquery functions is upto you. But I suggest not to mix both vanilla JS and JQuery codes(like in your question).
Closing
You can simply use closest or parent, like so:
$(".claim-btn-close").click(function(){
$(this).parent().hide();
});
$(".add-box").click(function() {
$(".add-box-wrap" + $(this).data('target')).show();
});
$(".claim-btn-close").click(function(){
$(this).parent().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add-box-wrap1" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<div class="add-box-wrap2" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
<a class="add-box" data-target="1">Add another<i class="fa fa-plus"></i></a>
</div>
<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
<a class="add-box" data-target="2">Add another<i class="fa fa-plus"></i></a>
</div>
Update on another question(3 column):
Using bootstrap, you can wrap the add-box-wrap divs within a .row and give each of it a class like col-*-4(class="col-xs-4 col-md-4 col-lg-4") assuming you have 3 success buttons(12/3 = 4). So the first part of your html would become
<div class="row">
<div class="add-box-wrap1 col-md-4 col-lg-4" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<div class="add-box-wrap2 col-md-4 col-lg-4" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<div class="add-box-wrap3 col-md-4 col-lg-4" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
</div>
You can use DOM relationship to target the desired element. Bind event handlers using a common class then use .closest() to traverse up desired element.
$(".claim-btn-close").click(function(){
$(this).closest(".add-box-wrap").hide();
});
If element are dynamically generate use Event Delegation approach.
$(staticParentElemet).on('click',".claim-btn-close",function(){
$(this).closest(".add-box-wrap").hide();
});
My page is basically split in two parts:
<div *ngIf="initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Title
</div>
<div class="content">
{{ someText }}
</div>
</div>
<button class="ui button" (click)="notInitialAnymore();">Click</button>
</div>
<div *ngIf="!initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Another title
</div>
<div class="content">
{{ someOtherText }}
</div>
</div>
</div>
The point is that the accordion in initalState works fine, but the one in not initial state not - no reaction on a click on that element. In my case it is easy to make a work-around, but how should I do it without a work-around? How can I make the second accordion call:
<script language='javascript'>
$(document).ready(function(){
$('.ui.accordion').accordion();
});
</script>
Use [hidden] attribute, when you use *ngIf the element is not created in the dom so jQuery can not init the accordion on it.
<div [hidden]="!initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Title
</div>
<div class="content">
{{ someText }}
</div>
</div>
<button class="ui button" (click)="notInitialAnymore();">Click</button>
</div>
<div [hidden]="initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Another title
</div>
<div class="content">
{{ someOtherText }}
</div>
</div>
</div>
I got an accordion code from W3Schools but I'd like to replace a class of an icon <i>.
How may I switchClass() of a element within this on this code?
Code from W3Schools:
var acc = document.getElementsByClassName("course-row");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("unit-row-hide");
}
}
My HTML:
<div class="row-history">
<div class="row course-row active">
<div class="course-name col-md-4">
<i class="fa fa-caret-right" aria-hidden="true"></i>
Curso Teste 4
</div>
<div class="course-progress col-md-2">
<div class="course-progress-bar-wrapper col-md-8">
<div class="course-progress-bar"> </div>
</div>
<div class="course-progress-percent col-md-4">100%</div>
</div>
<div class="course-remaining col-md-2">Completo</div>
<div class="course-timestamp col-md-2">21 horas atrás</div>
<div class="course-remove col-md-2"><i class="fa fa-times" aria-hidden="true"></i></div>
</div> <!-- .course-row -->
<div class="unit-row">
<div class="row single-unit">
<div class="unit-name col-md-4">
<i class="fa fa-angle-double-right" aria-hidden="true"></i>
Curso Teste 4 - Unidade 3
</div>
<div class="unit-nbsp col-md-4"> </div>
<div class="unit-timestamp col-md-2">21 horas atrás</div>
<div class="unit-remove col-md-2"><i class="fa fa-times" aria-hidden="true"></i></div>
</div>
</div> <!-- .unit-row -->
</div>
I need to replace the class fa-caret-right from <i class="fa fa-caret-right" aria-hidden="true"></i> to fa-caret-down when the div is collapsed and back to fa-caret-right when it is not collapsed.
You already use the appropriate function: classList.toggle(). Just select the <i> element and apply the function on it for both classes:
var fa = this.getElementsByTagName("i")[0];
fa.classList.toggle("fa-caret-right");
fa.classList.toggle("fa-caret-down");
The first one removes the right arrow, the second one adds the down arrow. On the next click it is vice versa (toggled).
I am trying to find clicked button value.here is my htmlcode,I am not able to get but always getting first one.
<div id="addSentiment" class="dialogs">
<div id="1" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> ki#n.com
</div>
<div id="cat_1" class="text">category : Scheduling
<br>
</div>
<div id="op_1" class="text">ddd word/phrase : providing solutions
<br>
</div>
<div id="feature_1" class="text">ddd word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="1" name="hd">
</div>
<div class="tools"> <a id="edit_1" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="2" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tc#n.com
</div>
<div id="cat_2" class="text">category : Scheduling
<br>
</div>
<div id="op_2" class="text">dddd : providing solutions
<br>
</div>
<div id="feature_2" class="text">ddddddde : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="2" name="hd">
</div>
<div class="tools"> <a id="edit_2" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="3" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tn#nn.com
</div>
<div id="cat_3" class="text">category : Scheduling
<br>
</div>
<div id="op_3" class="text">Opinion word/phrase : providing solutions
<br>
</div>
<div id="feature_3" class="text">Feature word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="3" name="hd">
</div>
<div class="tools"> <a id="edit_3" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
</div>
I tried following code in jquery
$(".dialogs .itemdiv .tools").live("click",function(e){
e.preventDefault();
alert('clicked on edit');
var n = $('.dialogs .itemdiv .tools a').attr('id');
alert(n);
});
I use live here because I am getting above html by using append method in jquery.
live is deprecated in later versions of jQuery - but to solve your issue you need to use an instance of this
$("#addSentiment").on("click", ".dialogs .itemdiv .tools", function(e){
e.preventDefault();
alert('clicked on edit');
var n = $("a", this).attr('id');
alert(n);
});
jQuery selectors catch the first match of their content.
To catch the n-th match, you need to use the n-th child selector, like this:
$(".dialogs .itemdiv .tools:nth-child(2)")
I am not familiar with the live method, but you should be able to do something like the following:
function addHandlers() {
$(".dialogs .itemdiv .tools a").each(function() {
$(this).click(function() {
alert('clicked on edit');
);
});
}
function yourAppendFunction() {
//your append code
//add call to a function that will create your event handlers
addHandlers();
}
The .each method runs through each and every item that fits the selection criteria, and then we use the this keyword within the function to reference what we are working on. Putting it in a function that we don't call until after you append the items ensures the html exists when you try to add the handlers you need.
API references:
each method: http://api.jquery.com/each/
click method: http://api.jquery.com/click/