Either 1 button clicked, getting 3 trigger actions. Not sure why it calls 3 times instead of getting the value of a clicked button.
if clicked the first button, it has to click only that button and get the title as "Test 1". But, it calls all 3 buttons at the same time.
$('.listing .btn.apply').click(function(){
let getTestName = $(this).parent().find('h1').text();
console.log('getTestName: ', getTestName);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"wrapper">
<div class="listing">
<h1>Test 1</h1>
Apply
</div>
<div class="listing">
<h1>Test 2</h1>
Apply
</div>
<div class="listing">
<h1>Test 3</h1>
Apply
</div>
</div>
Try this:
$('.listing .btn.apply').click(function(evt){
let getTestName = $(evt.target).parent().find('h1').text();
console.log('getTestName: ', getTestName); });
Explanation:
Your code doesn't specify which element will receive the event click, so jquery propagated to all elements with the same selector, you restrict to the "target" element which is clicked
Related
I have a little mini html game that uses Backbone.
The main page has multiple <div> tags with the class name of "monsterName".
There is a button near it, that, when clicked, I want to get the text that is inside the "monsterName" <div>
I am trying to use the closest() method from the WebAPI to find the closest <div> to the clicked button that has a class name of "monsterName".
Here this will help you see my HTML page generated by the view and template:
<div id="root">
<div id="title">Monster Hunting 101</div>
<div class="monsterArea">
<div class="monsterName">Orc</div>
<div class="controls">
<button class="findMonster">Monster Hunting</button>
</div>
</div>
<div class="monsterArea">
<div class="monsterName">Dragon</div>
<div class="controls">
<button class="findMonster">Monster Hunting</button>
</div>
</div>
<div class="monsterArea">
<div class="monsterName">Giant</div>
<div class="controls">
<button class="findMonster">Monster Hunting</button>
</div>
</div>
The view has code that fires when the button ".findMonster" is clicked:
events: {
"click .findMonster": "startHunt"
},
When that button is clicked, it fires this function:
startHunt: function (e) {
const $closestMonster = e.closest('.monsterName');
console.log($closestMonster.innerHTML);
...do some stuff with the text in the monsterName...
}
So the view is working and the button works, and it fires off the startHunt event.
But it always gives me this error:
Uncaught TypeError: e.closest is not a function
A combination of closest() and find() worked for this problem:
const $closestMonster = e.closest('.monsterArea').find('.monsterName');
I want to write a code that expands and collapses a div with a paragraph, once you click the header text above it.
<div class="container">
<h3><span class="toggler">Text that toggles</span></h3>
<div class="wrapper">
<p>Random text</p>
</div>
</div>
<div class="container">
<h3><span class="toggler2">Text that toggles</span></h3>
<div class="wrapper2">
<p>Random text</p>
</div>
</div>
I am aware that I could write a function like this which would toggle between display: block and display: none.
I could just repeat the same function for different divs with different classes and it would work, but if I have a lot of them I would end up repeating the same function multiple times and I feel like there has to be a much cleaner way to do this.
$(document).ready(function() {
$(".toggler").on("click", function() {
$(".wrapper").toggleClass("active");
});
});
You don't need write single line of code if you use jquery & bootstrap.
Solution 1:
Add reference bnelow:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
your html:
<div class="container">
<h3><span class="toggler" data-toggle="collapse" data-target="#col1">Text that toggles</span></h3>
<div class="wrapper" id="col1">
<p>Random text</p>
</div>
</div>
<div class="container">
<h3><span class="toggler2" data-toggle="collapse" data-target="#col2">Text that toggles</span></h3>
<div class="wrapper2" id="col2">
<p>Random text</p>
</div>
</div>
Solution 2:
Either you can write simple line code
$(document).ready(function() {
$("h3").on("click", function() {
$(this).next().toggleClass("active");
});
});
we can select header with header Tag. After that, we can add toogleClass to just next element that is "DIV".
so, when click header, toggleClass will be added to next element that is DIV
You dont need to repeat it, give both a single class like "toggle-enabled" then instead of using toggler and toggler2 as two function you can put toggle-enabled as one selector and both will run the same function on click.
If you want to only toggle the one selected then use "this" keyword to get current and hide and show that or slide it whatever you want to do but dont need to repeat the code.
Here is your example code working as expected:
$(document).ready(function() {
$(".toggle-enabled").on("click", function() {
var nextdiv = $(this).parent().siblings("div");
nextdiv.is(":visible")?nextdiv.hide():nextdiv.show();
});
});
.togglethis{color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h3><span class="toggler toggle-enabled">Text A that toggles</span></h3>
<div class="wrapper togglethis">
<p>Random text</p>
</div>
</div>
<div class="container">
<h3><span class="toggler2 toggle-enabled">Text B that toggles</span></h3>
<div class="wrapper2 togglethis">
<p>I have left your toggler2 class in there and you can add more classes to separate it</p>
</div>
</div>
This code should work for your html:
$(document).ready(function () {
$('[class^="toggler"]').on('click', function () {
$(this).closest('.container').children('[class^="wrapper"]').toggle();
});
});
The code looks for any element on your html whose class name starts with toggle. It then attaches an on-click handler function. That function then looks for the affected element's closest ancestor with class name of container. Then from that ancestor/parent, it selects children with class name starting with wrapper. It then toggles the visibility of those children (or child)
You could give your togglers class names of toggleN (where N is any valid class name character) or simply toggle (same class name for all). Similarity, you could name the classes for your wrappers as wrapperN or simply wrapper.
I would like to slide divs, all of them will have same id because they'll generate inside loop so also trigger has same id. That's why I want to use one function, at the moment function works only for first div and I have no idea how to fix it. I would like that each button would work for div above him.
html part
<div id='slide'>
hello
</div>
<p id='but'>click</p>
<div id='slide'>
hello
</div>
<p id='but'>click</p>
and the js
$(document).ready(function(){
$(this).click(function(){
$("#slide").slideToggle("slow");
});
});
First of all, don't have same ids on one page - use classes instead. If you want to do something with the element before clicked item, you can use prev(), something like this (in your code just change css('color', 'red') to slideToggle("slow"), I have added it just for example):
$(document).ready(function() {
$(".but").click(function() {
$(this).prev().css('color', 'red');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='slide'>
hello
</div>
<p class='but'>click</p>
<div class='slide'>
hello
</div>
<p class='but'>click</p>
Few issues:
Use classes not IDs and use the ID of the click element #but instead of this for your click function
<div class='slide'>
hello
</div>
<p class='but'>click</p>
<div class='slide'>
hello
</div>
<p class='but'>click</p>
$(document).ready(function(){
$('.but).click(function(){
$(".slide").slideToggle("slow");
});
});
I have the following code. I need to hide div 1 and display div2 when the button in div one is clicked. (In ANGULAR HTML5). I have a JS file with controllers etc. at the moement I have two diffetent html template files and I call these as separate modal pop up. Now instead of two pop ups, I need to just show only one pop up but just display or hide content from one of the divs.
<div id="div1">
<button name ="click" click="ClickMe()"/>
</div>
<div id = "div2">
<p> Some content</p>
</div>
This should toggle displayToggled on click, and remove the div from which the button was clicked from the DOM.
<div id="div1" ng-if="!displayToggled" >
<button name ="click" ng-click="displayToggled = true"/>
</div>
<div id = "div2" ng-if="displayToggled">
<p> Some content</p>
</div>
In your html
<body ng-app="myApp" ng-controller="myctrl as ctrl">
<div id="div1" ng-show="ctrl.btn">
<button name ="click" ng-click="ctrl.btn=!ctrl.btn"/>
</div>
<div id = "div2" ng-show="!ctrl.btn">
<p> Some content</p>
</div>
</div>
in your controller
.controller('myctrl', function(){
this.btn = true;
})
With the help of other members I have the following code that allows to show and hide divs one at a time.
If I click on a button it will show the corresponding div and if I click on another button, the previous div goes away and the next will show.
However, when I click on a button to show a div, it does not have any transition or timing effect. It shows up immediately
If in the function I add a timing like this.. $(id).show(800); It will have the transition or fadeIn effect, but if someone click on a button to show the div and click on the same button again to hide it, the div will go away and return right back.
Can someone help me to add that transition or fadeIn on a way that if the button is clicked to hide the div it will stay hidden?
This is what I have:
<p class="btn" onclick="toggleDivs('#div1');">Show div1</p>
<p class="btn" onclick="toggleDivs('#div2');">Show div2</p>
<p class="btn" onclick="toggleDivs('#div3');">Show div3</p>
<p class="btn" onclick="toggleDivs('#div4');">Show div4</p>
<div class="fadeOut" id="div1" style="display:none"; >
<div class="fadeOut" id="div1" style="display:none"; >
<div class="container">
<p>This is the content of div1</p>
</div>
<div class="fadeOut" id="div2" style="display:none"; >
<div class="container">
<p>This is the content of div2</p>
</div>
<div class="fadeOut" id="div3" style="display:none"; >
<div class="container">
<p>This is the content of div3</p>
</div>
<div class="fadeOut" id="div4" style="display:none"; >
<div class="container">
<p>This is the content of div4</p>
</div>
var toggleDivs = function (id) {
$(".fadeOut").hide(800);
$(id).show();
}
you should disable all buttons untill the end of the animation:
var toggleDivs = function (id) {
$('.btn').attr('disabled', true)
$(".fadeOut").hide(800, function() {
$(id).show(800, function() {
$('.btn').attr('disabled', false);
});
});
}
I suggest you add another class to your buttons that are going to be disabled in order to not disable all buttons with class btn in the DOM.