querySelector criteria based on class and ID at the same time - javascript

In this HTMl code :
<div class="modal__actions">
<button class="btn btn--passive">Cancel</button>
<button class="btn btn--success">Add</button>
</div>
<div class="modal" id="delete-modal">
<h2 class="modal__title">Are you sure?</h2>
<p class="modal__content">
Are you sure you want to delete this item? This action can't be made
undone!
</p>
<div class="modal__actions">
<button class="btn btn--passive">No (Cancel)</button>
<button class="btn btn--danger">Yes</button>
</div>
</div>
I am trying to reach to :
<button class="btn btn--passive">No (Cancel)</button>
item , I know there are different ways, but I am trying to use querySelector, I tried these commands but none of them selected what I was looking for:
const r1=document.querySelector('#delete-modal .btn btn--passive')
const r2=document.querySelector('#delete-modal, .btn btn--passive')
const r3=document.querySelector('.btn btn--passive, #delete-modal ')
Isn't it possible to use class and ID at the same time on querySelector ?

You should not have any space between the classes btn and btn--passive as they are for the same element. Also, you should prefix the class symbol for all the classes:
const r1=document.querySelector('#delete-modal .btn.btn--passive');
console.log(r1);
<div class="modal__actions">
<button class="btn btn--passive">Cancel</button>
<button class="btn btn--success">Add</button>
</div>
<div class="modal" id="delete-modal">
<h2 class="modal__title">Are you sure?</h2>
<p class="modal__content">
Are you sure you want to delete this item? This action can't be made
undone!
</p>
<div class="modal__actions">
<button class="btn btn--passive">No (Cancel)</button>
<button class="btn btn--danger">Yes</button>
</div>
</div>

Related

show and ng-show is not helping out for below div

when clicked on a button there should be a div to be shown that "Are u sure, u want to delete"
else other div should be shown.
i am trying either ways using ng-show or show()
<button
class="button-default button-m panel-heading-margin"
type="button"
ng-if="!$last"
ng-click="deleteButton();"
>
<i class="icon16 icon-delete v-sub di-block mr-0"></i>
</button>
<div class="modal-footer mt-10 p-0">
<div
id="deleteview"
class="bg-gray-light row"
ng-show="$scope.displayModal"
>
<div class="col-md-9">
<h4 class="p-15 text-left">
You are going to <b>Delete</b> the <b>Mapping</b> you have
selected. Are you sure you want to continue?
</h4>
</div>
<div class="col-md-3">
<div class="pt-25 text-right pr-5">
<button class="button-cancel button-m">Cancel</button>
<button id="deletesinglemap" class="button-m button-primary">
Delete
</button>
</div>
</div>
</div>
<div id="addview" class="pull-right p-20" ng-hide="$scope.displayModal">
<span class="button-cancel" data-dismiss="modal">Cancel</span>
<button id="addmapping" class="button-m button-primary" type="button">
Add
</button>
</div>
</div>
Controller:
$scope.slideUpModal = function () {
$scope.displayModal = true;
$("#deleteview").show();
$("#addview").hide();
};
when clicked on a button there should be a div to be shown that "Are u sure, u want to delete"
else other div should be shown.
i am trying either ways using ng-show or show()

Clone/Unclone in JQuery

I'm trying to 'clone' an image (showing it twice on the same page) as well as to hide it again on button clicks.
Is there a way to get it work using the function below?
$(".clone-button").on("click", function() {})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cloneControls" class="card">
<h4 class="card-header">Double Power!</h4>
<div class="card-body">
<div class="text-center">
<button class="btn btn-dark btn-lg clone-button">
<span class="fa fa-ok"></span>
Clone
</button>
<button class="btn btn-primary btn-lg unclone-button">
<span class="fa fa-plus"></span>
Unclone
</button>
</div>
</div>
</div>
I have just started learning Javascript and JQuery. I already did some research, tried toggle, bootstrap clone, even created getElementID, however, none of my approaches seemed to work. Apparently I am understanding it wrong, can anybody give me some first advice please?
It is pretty easy using JQuery's clone method. Note that it produces duplicate IDs. You have to remove them yourself. clone does not copy within the DOM. You have to insert the new node subsequently.
Since almost every JQuery method returns the JQuery collection, you can chain method invokations without using variables.
$(".clone-button").on("click", function()
{
$('#to-clone')
.clone()
.addClass('cloned')
.attr('id',null) // we do not want duplicate IDs
.insertAfter('#to-clone');
});
$(".unclone-button").on("click", function()
{
$('.cloned').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cloneControls" class="card">
<h4 class="card-header">Double Power!</h4>
<img id="to-clone" src="https://via.placeholder.com/350x65">
<div class="card-body">
<div class="text-center">
<button class="btn btn-dark btn-lg clone-button">
<span class="fa fa-ok"></span>
Clone
</button>
<button class="btn btn-primary btn-lg unclone-button">
<span class="fa fa-plus"></span>
Unclone
</button>
</div>
</div>
</div>

jQuery get text value from elements from different divs with same class

<div class="panel">
<div class="panel-heading item-name">T-shirt1</div>
<div class="panel-body"><img src="img/shirt1.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$15.32</span></h5>
<h4>$17.56</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
<div class="panel">
<div class="panel-heading item-name">T-shirt2</div>
<div class="panel-body"><img src="img/shirt2.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$21.67</span></h5>
<h4>$23.15</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
<div class="panel">
<div class="panel-heading item-name">T-shirt3</div>
<div class="panel-body"><img src="img/shirt3.jpg" class="img-responsive" alt="Image"></div>
<div class="panel-footer text-center">
<h5>PRICE: <span class="old-price">$16.69</span></h5>
<h4>$16.80</h4>
<button type="button" class="btn btn-danger add-to-cart">Add to cart</button>
</div>
</div>
What I really want is to retrieve the value of each item-name when I click on the Add to cart button. If I click on the first button, I should get T-shirt1, second button should alert T-shirt2, third button => T-shirt3.
Here is my jQuery script.
<script>
$('.add-to-cart').click(function() {
var itemName = $('.item-name', this).text();
alert(itemName);
});
</script>
You can try this:
$('.add-to-cart').click(function() {
var itemName = $(this).closest('.panel').find('.item-name').text();
alert(itemName);
});
Usage of the closest method: closest
Go from clicked button up in parents chain until you find .panel and then down in children tree until you find .item.name:
$('.add-to-cart').click(function() {
var itemName = $(this).parents('.panel').children('.item-name').first().text();
alert(itemName);
});

AngularJS Issues

I have DIVs generated by ng-repeat and inside them I have inner DIVs. I would like the inner DIVs to be visible when a user click on the outer DIVs. An inner DIV must be visible only when its outer DIV is clicked. I implemented it with $scope.bot variable and it's not working as I want since when one outer DIV is clicked, all the inner DIVs of the other outer DIVs become visible (this is because they all depend on the $scope.bot variable).
I would like to also click on the outer div again and the inner DIV if it is visible then it will disappear.
<div>
<div>Course</div>
<div ng-repeat="course in courses" ng-click=" tog()">
{{course .name}}
<div ng-show="bot== true">
<div class="pull-right"><span>X</span></div>
<button class="btn btn-primary">Stop</button>
<button class="btn btn-danger">Start</button>
</div>
</div>
</div>
$scope.bot = false;
$scope.tog = function(){
if(!$scope.bot ){
$scope.bot = true;
}
}
This is an option:
<div>
<div>Course</div>
<div ng-repeat="course in courses" ng-click="tog($index)">
{{course .name}}
<div ng-show="bot[$index]== true">
<div class="pull-right"><span>X</span></div>
<button class="btn btn-primary">Pause/Resume</button>
<button class="btn btn-danger">Abort</button>
<button class="btn btn-success">Detail</button>
</div>
</div>
</div>
$scope.bot = [];
$scope.tog = function(index){
$scope.bot[index] = !$scope.bot[index];
}
Just place the visibility flag on the course object itself, so every course will have it's own flag:
<div>
<div>Course</div>
<div ng-repeat="course in courses" ng-click=" tog(course)">
{{course .name}}
<div ng-show="course.bot== true">
<div class="pull-right"><span>X</span></div>
<button class="btn btn-primary">Pause/Resume</button>
<button class="btn btn-danger">Abort</button>
<button class="btn btn-success">Detail</button>
</div>
</div>
</div>
$scope.tog = function(course){
if(!course.bot ){
course.bot = true;
}
}
Try this
<div>
<div>Course</div>
<div ng-repeat="course in courses" ng-click="course.bot = !course.bot">
{{course .name}}
<div ng-show="course.bot === true">
<div class="pull-right"><span>X</span></div>
<button class="btn btn-primary">Stop</button>
<button class="btn btn-danger">Start</button>
</div>
</div>
A simple way to do this is to remove everything regarding divs appearing and disappearing from controller and handle everything in the template.
<div>
<div>Course</div>
<div ng-repeat="course in courses" ng-init="bot=false" ng-click="bot = !bot">
{{course .name}}
<div ng-show="bot">
<div class="pull-right"><span>X</span></div>
<button class="btn btn-primary">Pause/Resume</button>
<button class="btn btn-danger">Abort</button>
<button class="btn btn-success">Detail</button>
</div>
</div>
</div>
You can initialize the bot variable at each parent div level because ng-repeat creates a new scope for every element.
This issue you are having because you are using one bot variable which is associated to all divs.
<div>
<div>Course</div>
<div ng-repeat="course in courses" ng-click=" tog($index)">
{{course .name}}
<div ng-show="course.bot== true">
<div class="pull-right"><span>X</span></div>
<button class="btn btn-primary">Pause/Resume</button>
<button class="btn btn-danger">Abort</button>
<button class="btn btn-success">Detail</button>
</div>
</div>
</div>
$scope.tog = function(index){
$scope.courses[index].bot = !$scope.courses[index].bot;
}

How can I swap two id's between 2 html elements?

Let's say I have this page structure
<div id="line-value-container-1-1">
<button type="button" id="up_value_1_1">
<span class="icon-chevron-up"></span>
</button>
<button type="button" id="down_value_1_1">
<span class="icon-chevron-down"></span>
</button>
</div>
<div id="line-value-container-1-2">
<button type="button" id="up_value_1_2">
<span class="icon-chevron-up"></span>
</button>
<button type="button" id="down_value_1_2">
<span class="icon-chevron-down"></span>
</button>
</div>
<div id="line-value-container-1-3">
<button type="button" id="up_value_1_3">
<span class="icon-chevron-up"></span>
</button>
<button type="button" id="down_value_1_3">
<span class="icon-chevron-down"></span>
</button>
</div>
Let'say when for example when button with id="up_value_1_3" is clicked, I want to move the its parent div up onde element so it's stays before div with id="line-value-container-1-2" like this:
<div id="line-value-container-1-1">
<button type="button" id="up_value_1_1">
<span class="icon-chevron-up"></span>
</button>
<button type="button" id="down_value_1_1">
<span class="icon-chevron-down"></span>
</button>
</div>
<div id="line-value-container-1-3">
<button type="button" id="up_value_1_3">
<span class="icon-chevron-up"></span>
</button>
<button type="button" id="down_value_1_3">
<span class="icon-chevron-down"></span>
</button>
</div>
<div id="line-value-container-1-2">
<button type="button" id="up_value_1_2">
<span class="icon-chevron-up"></span>
</button>
<button type="button" id="down_value_1_2">
<span class="icon-chevron-down"></span>
</button>
</div>
This problem is easely solved with JQuery insertBefore() function.
Now Imagine I want to exchange id's between this two moved div's, when I say for example:
$("#line-value-container-1-2".attr('id', "#line-value-container-1-3");
$("#line-value-container-1-3".attr('id', "#line-value-container-1-2");
This simple exchange does not works because after the first id change the document becames an invalid HTML, because there's two elements with same id, and the second statement will just select the first element with that id which is the id previously changed.
Conclusion all changes make no changes. How can I solve this problem?
You can use custom data-* attributes like
$("#line-value-container-1-2").attr('data-id', "line-value-container-1-3");
$("#line-value-container-1-3").attr('data-id', "line-value-container-1-2");
$("#line-value-container-1-2,#line-value-container-1-3").each(function(){
$(this).attr('id', $(this).attr('data-id'));
});
You can temporarily store the first reference in a variable while you make the change, like this:
var temp = $('#line-value-container-1-2');
$('#line-value-container-1-3').attr('id', 'line-value-container-1-2');
temp.attr('id', 'line-value-container-1-3');

Categories