help me get the value from the button, I can not
my code:
<i class="fas fa-shopping-cart"></i> press
<script>
funk = (a) => {
console.log(a.value)
}
</script>
Set a value in HTML and retrieve it on click with getAttribute
<i class="fas fa-shopping-cart"></i> press
const funk = (a) => {
console.log(a.getAttribute("value"))
}
There's a few issues in your code:
The link will transfer the page, so you probably need to preventDefault
a elements don't have a value attribute. Use a data attribute to add custom metadata to an element
Use an unobtrusive event binding, not outdated onclick attributes
Here's a corrected version using plain JS:
document.querySelectorAll('.price-button').forEach(el => {
el.addEventListener('click', e => {
e.preventDefault(); // stop the page transfer
const button = e.target;
console.log(button.dataset.value);
});
});
<a href="#" data-value="123" class="price-button">
<i class="fas fa-shopping-cart"></i>
press
</a><br />
<a href="#" data-value="456" class="price-button">
<i class="fas fa-shopping-cart"></i>
press
</a>
And the same thing in jQuery, as you tagged that as well:
jQuery($ => {
$('.price-button').on('click', e => {
e.preventDefault(); // stop the page transfer
const $button = $(e.target);
console.log($button.data('value'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<a href="#" data-value="123" class="price-button">
<i class="fas fa-shopping-cart"></i>
press
</a><br />
<a href="#" data-value="456" class="price-button">
<i class="fas fa-shopping-cart"></i>
press
</a>
Related
so ive got this code
<div class="col-lg-12 video-meta">
<div class="container">
<span class="views"><i class="far fa-eye"></i>{{ Counter::show('post', $post->id) }}</span>
<span class="lnd">
<a class="like" href="#"><i class="far fa-thumbs-up"></i></a>
<a class="like" href="#"><i class="far fa-thumbs-down"></i></a>
</span>
and i target it with
$('.like').on('click', function(event) {
event.preventDefault();
var isLike = event.target.previousElementSibling == null;
console.log(isLike);
and it returns "true" in both cases, why?! is there a reason for this? ive been on it for 4 hours straight now and it worked ONCE , i did change nothing just took a break and then it didnt work after my break? i think this is some kind of bad joke. what am i missing here?
it should basically take the "like" class, and as the first a tag has no previousSiblingElement which is null, it should return true, but the second has an element with the same tag as a sibling and still returns true..
event.target is the <i> element, because that's the element on which the click really occured.
If you want the <a> (on which you did attach the event handler), you need to request event.currentTarget or even just this:
$('.like').on('click', function(event) {
event.preventDefault();
console.log(event.target); // <i>
var isLike = event.currentTarget.previousElementSibling == null;
console.log(isLike);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-12 video-meta">
<div class="container">
<span class="lnd">
<a class="like" href="#"><i class="far fa-thumbs-up">a</i></a>
<a class="like" href="#"><i class="far fa-thumbs-down">b</i></a>
</span>
</div>
</div>
On my site I have a menu to the right of the navigation bar. It displays the search when it is available on the current page.
I want to display an icon when the search is available.
All search blocks have the class .views-exposed-form and appear in #navbar-collapse-second
I added to my icon, the class .icon-navbar-alert-disable which is used to hide the icon.
How to remove the .icon-navbar-alert-disable class when the .views-exposed-form class is present in #navbar-collapse-second ?
Here is the css code to hide the icon :
.region-navigation-menu-second .navbar-toggle-second .icon-navbar-alert-disable {
display: none;
}
Here is the code of the button of my manu with the icon :
<div{{ attributes }}>
<a class="navbar-toggle-second collapsed" data-toggle="collapse" data-target="#navbar-collapse-second" aria-expanded="false">
<div class="icon-navbar">
<span class="fa-layers fa-3x">
<i class="far fa-circle"></i>
<span class="navbar-icon-open">
<i class="fas fa-filter" data-fa-transform="shrink-9"></i>
</span>
<span class="navbar-icon-close">
<i class="fas fa-times" data-fa-transform="shrink-8"></i>
</span>
</span>
</div>
<div class="icon-navbar-alert icon-navbar-alert-disable">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-filter fa-stack-1x fa-inverse"></i>
</span>
</div>
</a>
</div>
Here is the page concerned, this is the menu on the right :
https://www.s1biose.com/boutique/ma-boutique-pro
I started a JS code but it is not complete :
$('#navbar-collapse-second') ???.views-exposed-form??? {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
});
UPDATE
(function ($) {
if ($('#navbar-collapse-second').hasClass('views-exposed-form')) {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
} else {
$('#block-togglenavigationsecond').addClass('icon-navbar-alert-disable');
};
})(window.jQuery);
enter image description here
Are you looking for the hasClass selector in jQuery?
If so wrap it in a if statement and inside you can show the result you'd like from it;
if ($('#navbar-collapse-second').hasClass('views-exposed-form') === false) {
$('#block-togglenavigationsecond').removeClass('icon-navbar-alert-disable');
} else {
$('#block-togglenavigationsecond').addClass('icon-navbar-alert-disable');
};
I am trying to change this glyphicon on click but it works fine when href = "#" but originally my href contains a url which through a view hits the database in django.
HTML:
<div class='hidden-lg'>
<div class="content-header">
<h1>
<a id = "star" href="#" data-toggle="tooltip" title = "Add to your list" data-placement="top">
<span class="glyphicon glyphicon-star-empty"></span>
</a>
</h1>
</div>
</div>
JS:
$('#star').click( function(){
$(this).find('span').toggleClass('glyphicon glyphicon-star-empty').toggleClass('glyphicon glyphicon-star');
});
This works fine.
http://jsfiddle.net/asees/5XqyW/564/
But when i change href to the below code, there is no change on glyphicon.
<a id = "star" href="{% url 'add' %}" data-toggle="tooltip" title = "Add to your list" data-placement="top">
<span class="glyphicon glyphicon-star-empty"></span>
</a>
Working fiddle.
Since you're clicking on anchor #star you need to prevent the default event
(redirecting to href) using e.preventDefault() like :
$('#star').click( function(e){
e.preventDefault();
$(this).find('span').toggleClass('glyphicon glyphicon-star-empty').toggleClass('glyphicon glyphicon-star');
});
hi guys I am doing a toggle effect in my page, but i got error when i move the button close for other part of the page. If the button is in a part of html works if are for example in other div the button does not work.can you guy figure out what is going on? also can u say if that my jquery is clean? or need to be improved?
html:
<a href="#menu-toggle" class="btn btn-sidebar-close" id="close">
<i class="fa fa-times" aria-hidden="true"></i>
</a>
<a href="#menu-toggle" id="menu-toggle"data-toggle="tooltip>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
js:
$('#close').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
$('#menu-toggle').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
An improvement could be:
$('#close').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
$('#menu-toggle').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
in a single function as they're both containing the same functionality:
$('#close, #menu-toggle').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
You forgot to close quote after "tooltip" here :
<a href="#menu-toggle" id="menu-toggle"data-toggle="tooltip">
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
</a>
Otherwise, your code is working :
See this Fiddle
I am struggling to figure out how to disable a ng-click event based on the value of a boolean variable.
I have a form, on which the user has to click a (+) sign/ link to add a new record, when the user does this, a small function is triggered, and sets a boolean to false.
Code:
vm.addNewRecord = function (formClass) {
vm.hasID = false;
};
The form has an icon/ link that allows the user to save information about participant, to the record.
Code:
<div class="icon">
<a ng-click="addParticipants(data)">
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
That issue is that this information depends on a record id, but this id does not exist yet.
I need to be able to disable the ng-click of: addParticipants(data) is the value of hasId = false, and at the same time (somehow) allow the user to click it to display a message in the lines of: "Please save this record before adding participants."
What I have tried so far, and without success:
<div class="datagrid-icon">
<a ng-click="datagrid.add(datagrid)" ng-disabled="!hasID">
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
And:
<div class="datagrid-icon">
<a ng-click="datagrid.add(datagrid)" ng-class="{'disabled': !hasID}">>
<i class="fa fa-fw fa-plus"></i>
</a>
</div>
I checked the value of hasID and it is false but I am still able to click on the (+) sign for addParticipants. And also, I am not sure how if I manage to disable the click, I am going to display the message instructing the user to first save the main record and then adding participants will be possible.
If anyone could offer some help to resolve this, that would be much appreciated.
Thank you.
To disable a link you can do like
<a ng-click="hasID && datagrid.add(datagrid)">
<i class="fa fa-fw fa-plus"></i>
</a>
But it's much better to have a method inside your controller like
vm.addToGrid = function(id) {
if (id) {
$scope.datagrid.add(id);
} else {
alert('Save the record before');
}
}
<a ng-click="vm.addToGrid(datagrid)">
<i class="fa fa-fw fa-plus"></i>
</a>