How can I bind Dom $(this) From Another Function

How can I bind Dom $(this) From Another Function - javascript

Can you please take a look at this code and let me how can I bind $(this) in an external function inside dom event?
$(".adder").on("click", function(){
updateText();
});
function updateText(){
$(this).next(".mapper").html("Got You!");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default adder">Left</button>
<button type="button" class="btn btn-default mapper">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default adder">Left</button>
<button type="button" class="btn btn-default mapper">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>

You should be able to pass this along as an argument:
$(".adder").on("click", function(){
var node = $(this);
updateText(node);
});
function updateText(node){
node.next(".mapper").html("Got You!");
}

one way to do this is following:
function updateText(){
$(this).next(".mapper").html("Got You!");
}
$(".adder").on("click", updateText);
another is
function updateText(){
$(this).next(".mapper").html("Got You!");
}
$(".adder").on("click", function(){
updateText.bind(this)();
});

function updateText(e){
e.next(".mapper").html("Got You!");
}
$(".adder").on("click", function(){
updateText($(this));
});

Related

Change background when select

I'm trying out bootstrap and seem to be stuck. I have some radio buttons but what I want is it to be outlined when not selected and solid or "btn-primary" when it is selected.
I can attempt to do wit with JavaScript but i might have to give each an individual ID and go from there. I'm sure there is a better way with JavaScript
<div class="row">
<div class="col offset-md-2">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
<button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
<button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
<button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
<button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
<button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
<button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
</div>
</div>
</div>
</div>

If you want to achieve this with pure JavaScript, you could bind a click handler to each element. The handler would modify the element's class when the button was clicked:
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
this.classList.remove('btn-outline-secondary');
this.classList.add('btn-primary');
}
}
.btn-outline-secondary {border: 1px solid #aaa;}
.btn-primary {border: 1px solid blue; background: blue; color: white;}
<div class="row">
<div class="col offset-md-2">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
<button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
<button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
<button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
<button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
<button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
<button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
</div>
</div>
</div>
</div>
See these two answers for more information on binding events without a framework and changing the class of elements.
An alternative
If you're open to using a library such as jQuery, binding the event handler could be a lot simpler. With the jQuery library included, your code would be:
$("button").click(function(){ /*apply new class using .removeClass() and .addClass() methods*/ });
See the jQuery documentation for more information on .click().

var button = document.getElementsByTagName("button");
for (var i = 0; i < button.length; i++) {
button[i].onmouseover = function() {
this.classList.remove('btn-outline-secondary');
this.classList.add('btn-primary');
}
button[i].onmouseout = function() {
this.classList.remove('btn-primary');
this.classList.add('btn-outline-secondary');
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="caontainer">
<div class="row">
<div class="col offset-md-2">
<div class="form-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary" id="zone1">Zone 1</button>
<button type="button" class="btn btn-outline-secondary" id="zone2">Zone 2</button>
<button type="button" class="btn btn-outline-secondary" id="zone3">Zone 3</button>
<button type="button" class="btn btn-outline-secondary" id="zone4">Zone 4</button>
<button type="button" class="btn btn-outline-secondary" id="zone5">Zone 5</button>
<button type="button" class="btn btn-outline-secondary" id="zone6">Zone 6</button>
<button type="button" class="btn btn-outline-secondary" id="bush">Bush</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hope it'll help :)

On click of button group how to identify which button is clicked

i have a button group consist of four buttons,what i am trying to do is whenever user clicks on any button i want fetch its text
I am doing something like this
$(".btn").click(function() {
var button_text = $('#oneMonth').text();
alert(button_text)
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="btn-group" role="group" align="center">
<button type="button" class="btn btn-primary" id="sevenDays">Seven Days</button>
<button type="button" class="btn btn-primary" id="oneMonth">One Month</button>
<button type="button" class="btn btn-primary" id="sixMonths">Six Months</button>
<button type="button" class="btn btn-primary" id="oneYear">One Year</button>
</div>
I am doing something like this but its not the right way as i have to put each and every id of button to get the text
I want to do like if user clicks on any button just get the text of that button only

Use this keyword instead of specific selector in alert to get the text of the clicked button
var button_text = $(this).text();
This will always give the text of the button with id oneMonth
$('#oneMonth').text();
$(".btn").click(function() {
var button_text = $(this).text();
alert(button_text)
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="btn-group" role="group" align="center">
<button type="button" class="btn btn-primary" id="sevenDays">Seven Days</button>
<button type="button" class="btn btn-primary" id="oneMonth">One Month</button>
<button type="button" class="btn btn-primary" id="sixMonths">Six Months</button>
<button type="button" class="btn btn-primary" id="oneYear">One Year</button>
</div>

You can do this by adding the this jQuery to your code. Here is a working snippet:
var buttons = $("button");
buttons.click(function() {
$(".display__text").text($(this).text());
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<div class="btn-group" role="group" align="center">
<button type="button" class="btn btn-primary" id="sevenDays">Seven Days</button>
<button type="button" class="btn btn-primary" id="oneMonth">One Month</button>
<button type="button" class="btn btn-primary" id="sixMonths">Six Months</button>
<button type="button" class="btn btn-primary" id="oneYear">One Year</button>
</div>
<div class="display__text"></div>

swap div when click button jquery

How can I use jquery to swap div , I want to if i click botton it'll desplay lay-out-sw and if I click en it should swap
In my html
<div class="layout-sw">
sw
</div>
<div class="layout-en">
en
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-info btn-language btn-sw">SW</button>
<button type="button" class="btn btn-default btn-language btn-en">EN</button>
</div>
I use this jquery but i got some error
<script type="text/javascript">
$(function() {
$('.layout-en').hide();
$('.btn-language').on('click',function(e){
$('.btn-language').removeClass('btn-info').addClass('btn-default');
$(this).removeClass('btn-default').addClass('btn-info');
$('.layout-sw,.layout-en').hide();
($(this).text()=='SW') ? $('.layout-sw').show() : $('.layout-en').show();
})
$('.btn-on-off').on('click',function(e){
$(this).closest('.btn-on-off-widget').find('.btn-value').val($(this).attr('value'));
$(this).next('.btn-on-off').removeClass('btn-primary btn-gray').addClass('btn-default');
$(this).prev('.btn-on-off').removeClass('btn-primary btn-gray').addClass('btn-default');
if($(this).attr('value')==0){
$(this).removeClass('btn-default').addClass('btn-gray');
}else{
$(this).removeClass('btn-default').addClass('btn-primary');
}
})
});
</script>

You can simply use show() and hide() function of jQuery as below.
$(document).ready(function() {
$('.layout-en').hide();
$('.btn-sw').click(function() {
$('.layout-sw').show();
$('.layout-en').hide();
});
$('.btn-en').click(function() {
$('.layout-en').show();
$('.layout-sw').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layout-sw">
sw
</div>
<div class="layout-en">
en
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-info btn-language btn-sw">SW</button>
<button type="button" class="btn btn-default btn-language btn-en">EN</button>
</div>

Deactivate Toggle Buttons

Very simple I just need a quick pointer,
Bootstrap Button Group (for a 1-in-3 toggle button) defined as:
<!-- Twitter Bootstrap Button Group -->
<div class="btn-group">
<button type="button" class="btn btn-primary">General</button>
<button type="button" class="btn btn-primary">Tab 2</button>
<button type="button" class="btn btn-primary">Tab 3</button>
</div>
On clicking a button I select it to keep it active/pressed: that's my current tab, but I need to unselect all others. Only 1 toggle button at a time.
$('.btn').click(function(e) {
e.preventDefault();
$(this).addClass('active');
})
// this never unselects other toggle buttons
Also, how would I define the content under each toggle button?

You have to remove active class from previous button(which was selected previous) using removeClass() method.
$('.btn').click(function(e) {
e.preventDefault();
$('.btn-group > button.active').removeClass('active');
$(this).addClass('active');
})
$('.btn').click(function(e) {
e.preventDefault();
$('.btn-group > button.active').removeClass('active');
$(this).addClass('active');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
<button type="button" class="btn btn-primary">General</button>
<button type="button" class="btn btn-primary">Tab 2</button>
<button type="button" class="btn btn-primary">Tab 3</button>
</div>

Additionally to #Alexandru-IonutMihai answer, if you want to do it one line you could select the active button and the just-clicked button and toggle their classes.
var $btn = $('.btn-group .btn');
$btn.click(function(e) {
e.preventDefault();
$(this).add($btn.filter('.active')).toggleClass('active');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group">
<button type="button" class="btn btn-primary">General</button>
<button type="button" class="btn btn-primary">Tab 2</button>
<button type="button" class="btn btn-primary">Tab 3</button>
</div>

$('.btn').on('click', function(e) {
e.preventDefault();
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
<button type="button" class="btn btn-primary">General</button>
<button type="button" class="btn btn-primary">Tab 2</button>
<button type="button" class="btn btn-primary">Tab 3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Tab 4</button>
<button type="button" class="btn btn-primary">Tab 5</button>
<button type="button" class="btn btn-primary">Tab 6</button>
</div>
Just adding one small tweak to Alexandru's original answer...
In case there were multiple button groups within the page, then to isolate the select / deselect events, and to ascertain that those button groups don't interfere with each other, we could modify the code slightly as follows:
$('.btn').on('click', function(e) {
e.preventDefault();
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
The only new line added here is: $(this).siblings().removeClass('active') such that it removes any of the previously added active class from the current button group only.

Select all buttons except one with jQuery -2

I have this code :
<div class="nav navbar-nav" id="filters">
<button class="btn btn-default navbar-btn active" data-filter="*">Tous</button>
<button class="btn btn-default navbar-btn" data-filter=".image">Photos</button>
<button class="btn btn-default navbar-btn" data-filter=".movie">Vidéos</button>
<button class="btn btn-default navbar-btn" data-filter=".text">Text Seulement</button>
<button class="btn btn-default navbar-btn" id="sort" data-sort-value="likes">Likes</button>
</div>
I would like select all buttons from div #filters except the only one with #sort, using jQuery's selector.
Currently I have tried to achieve this by following code.
$('#filters').not('#sort').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button:not("#sort")', function() {
$buttonGroup.find('.active').removeClass('active');
$( this ).addClass('active');
});
});
Can you help me ?
Any help in this would be greatly appreciated.

Use .not() in your selector and find buttons as $('#filters > button') by using Child Selector (“parent > child”)
Your question and code is bit confusing but It says that you want to apply the active class on button when it clicked and removed from other buttons.
The following click event will work on all the buttons except #sort.
$('#filters > button').not($('#sort')).click(function(){
$('#filters > button').removeClass('active');
$(this).addClass('active');
});
$('#filters > button').not($('#sort')).click(function(){
$('#filters > button').removeClass('active');
$(this).addClass('active');
});
.active{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav navbar-nav" id="filters">
<button class="btn btn-default navbar-btn active" data-filter="*">Tous</button>
<button class="btn btn-default navbar-btn" data-filter=".image">Photos</button>
<button class="btn btn-default navbar-btn" data-filter=".movie">Vidéos</button>
<button class="btn btn-default navbar-btn" data-filter=".text">Text Seulement</button>
<button class="btn btn-default navbar-btn" id="sort" data-sort-value="likes">Likes</button>
</div>

Use $("#filters *").not("#sort") selector.
Please check below snippet for more understanding.
$("#filters button").on("click",function(){
$("#filters *").not("#sort").removeClass('active');
$(this).not("#sort").addClass('active');
});
.active{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav navbar-nav" id="filters">
<button class="btn btn-default navbar-btn active" data-filter="*">Tous</button>
<button class="btn btn-default navbar-btn" data-filter=".image">Photos</button>
<button class="btn btn-default navbar-btn" data-filter=".movie">Vidéos</button>
<button class="btn btn-default navbar-btn" data-filter=".text">Text Seulement</button>
<button class="btn btn-default navbar-btn" id="sort" data-sort-value="likes">Likes</button>
</div>

You could use a css :not selector like this:
$("#filters button:not('#sort')")

Develop Reference

JavaScript is the programming language of the Web.

How can I bind Dom $(this) From Another Function - javascript

You should be able to pass this along as an argument: $(".adder").on("click", function(){ var node = $(this); updateText(node); }); function updateText(node){ node.next(".mapper").html("Got You!"); }

one way to do this is following: function updateText(){ $(this).next(".mapper").html("Got You!"); } $(".adder").on("click", updateText); another is function updateText(){ $(this).next(".mapper").html("Got You!"); } $(".adder").on("click", function(){ updateText.bind(this)(); });

function updateText(e){ e.next(".mapper").html("Got You!"); } $(".adder").on("click", function(){ updateText($(this)); });

Related

Change background when select

On click of button group how to identify which button is clicked

swap div when click button jquery

Deactivate Toggle Buttons

Select all buttons except one with jQuery -2

Categories

Resources