I have these buttons in HTML code (I cannot change this code):
<a class="btn button-sidebar-wide" href="/courses/34?view=feed">
<i class="icon-stats"></i>
Visualizar fluxo do curso
</a>
<a class="btn button-sidebar-wide" href="/courses/34/discussion_topics/new?is_announcement=true"><i class="icon-announcement"></i> Novo Aviso
</a>
<a class="btn button-sidebar-wide" rel="nofollow" data-method="post" href="/courses/34/student_view">
<i class="icon-student-view"></i> Visualização do aluno
</a>
<a class="btn button-sidebar-wide" href="/courses/34/analytics"><i class="icon-analytics" role="presentation"></i> Visualizar análise do curso</a>
</div>
And I want to hide the buttons "Visualizar análise do curso" and "visualizar fluxo do curso". I try this JS:
function hidebutton(){
const btn = document.querySelectorAll("a.button-sidebar-wide");
btn
btn.forEach(btn=>{
btn.style.display = "none";
})
}
But this hide all buttons.
In order for you to be able to target specific elements they need to have specific traits, all the buttons are being hidden because all of them match with your selector query.
But, if try to find is unique there you'll encounter the <i> tags with some very specific classes.
So you can select those elements and hide their parents as follows:
( you can test this right now )
document.querySelectorAll('i.icon-analytics,i.icon-stats').forEach(i => i.parentNode.style='display:none')
a {display:block}
<div>
<a class="btn button-sidebar-wide" href="/courses/34?view=feed">
<i class="icon-stats"></i> Visualizar fluxo do curso
</a>
<a class="btn button-sidebar-wide" href="/courses/34/discussion_topics/new?is_announcement=true"><i class="icon-announcement">
</i> Novo Aviso </a>
<a class="btn button-sidebar-wide" rel="nofollow" data-method="post" href="/courses/34/student_view">
<i class="icon-student-view"></i>Visualização do aluno </a>
<a class="btn button-sidebar-wide" href="/courses/34/analytics">
<i class="icon-analytics" role="presentation"></i> Visualizar análise do curso</a>
</div>
If you want only to hide the first and last buttons, you can do this.
function hidebutton(){
const btns = document.querySelectorAll("a.button-sidebar-wide");
btns[0].style.display = "none";
btns[btns.length-1].style.display = "none;"
}
You can also use nth-child as long as the button order quantity and order don't change; you can use these as JS selectors as well:
.btn {
background: #efefef;
padding: 1em;
display: inline-block;
}
div .btn:nth-child(1),
div .btn:nth-child(4) {
display: none;
}
<div><a class="btn button-sidebar-wide" href="/courses/34?view=feed">
<i class="icon-stats"></i>
Visualizar fluxo do curso
</a>
<a class="btn button-sidebar-wide" href="/courses/34/discussion_topics/new?is_announcement=true"><i class="icon-announcement"></i> Novo Aviso
</a>
<a class="btn button-sidebar-wide" rel="nofollow" data-method="post" href="/courses/34/student_view">
<i class="icon-student-view"></i> Visualização do aluno
</a>
<a class="btn button-sidebar-wide" href="/courses/34/analytics"><i class="icon-analytics" role="presentation"></i> Visualizar análise do curso</a>
</div>
You can use CSS selectors in querySelectorAll to get specific elements. If you know how to select the element is CSS, you'll know how to do it in JS by querying the same lines. Like with the :first-of-type selector, for example. And then loop over the result of that query to change the style.display property.
function hideButtons() {
const firstAndLastButtons = document.querySelectorAll(`
a.button-sidebar-wide:first-of-type,
a.button-sidebar-wide:last-of-type
`);
for (const button of firstAndLastButtons) {
button.style.display = none;
}
}
Related
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>
New to JS, just dipping in to solve a problem (I bet everyone says that!). I need to write a script to select an anchor and insert an <img>.
There are several <a>'s within a div that has an id of _nwa_social_logins. I need to add an img tag to one of those. I'm not sure of the best way of doing this.
It's a captive portal page served up by a product we use, and the bit I'm interested in looks like this:
<div id="_nwa_social_logins">
<a class="btn btn-facebook" href="<url>/guest/social-media.php?oauth_init=1&oauth=facebook" title="">
<i class="icon-facebook"></i> Facebook
</a>
<a class="btn btn-linkedin" href="https://<url>/guest/social-media.php?oauth_init=1&oauth=linkedin" title="">
<i class="icon-linkedin"></i> LinkedIn
</a>
<a class="btn btn-google" href="https://<url>/guest/social-media.php?oauth_init=1&oauth=google" title="">
<i class="icon-google"></i> Google
</a>
<a class="btn btn-twitter" href="https://<url>/guest/social-media.php?oauth_init=1&oauth=twitter" title="">
<i class="icon-twitter"></i> Twitter
</a>
<a class="btn btn-github" href="https://<url>/guest/social-media.php?oauth_init=1&oauth=azure" title=""><img src="images/icon-microsoft.png" align="middle">Microsoft Azure AD
</a>
<a class="btn btn-github" href="https://<url>/guest/social-media.php?oauth_init=1&oauth=amazon" title="">Amazon</a>
</div>
So far I have
let items = document.querySelector('#_nwa_social_logins a');
To be honest I don't know how to even check if that has selected anything.
I need to select the Amazon anchor and set an <img> for the button. If the selection above gives me a list of <a>s (objects?) can I loop through them and look for one that has an href value that ends with 'amazon'?
Thank you
You can do this:
<script>
window.addEventListener('load', () => {
let links = document.querySelectorAll('#_nwa_social_logins a');
links.forEach((link, index) => {
if (link.getAttribute("href").toLowerCase().lastIndexOf('amazon') >= 0)
link.innerHTML = '<img src="someimage">';
});
});
</script>
Im trying to implement accordion menu. I did that and it's not working. I just want to do toggle icon
$('.logo-button').click(function(){
$(this).find('.my-arrow').toggleClass('down');
});
.my-arrow.down {
transform:rotate(450deg);}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#logo-fifthteen-content" class="logo-button" data-toggle="collapse" data-target="#collapse15" aria-expanded="false" aria-controls="collapse15">
<span class="left-side-panel">Text</span>
<i class="fa fa-angle-right my-arrow"></i>
</a>
In order for the transform property to work, try to set display: block or display:inline-block within the .my-arrow.down class:
.my-arrow.down {
display: block;
transform:rotate(450deg);
...
You also need to include content within your <i> element. For example, you could use the > character:
<i class="fa fa-angle-right my-arrow">
>
</i>
Here is a working example with your code and my modifications:
$('.logo-button').click(function(){
$(this).find('.my-arrow').toggleClass('down');
});
.my-arrow.down {
display: inline-block;
transform:rotate(450deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#logo-fifthteen-content" class="logo-button" data-toggle="collapse" data-target="#collapse15" aria-expanded="false" aria-controls="collapse15">
<span class="left-side-panel">Text</span>
<i class="fa fa-angle-right my-arrow">></i>
</a>
I have a list and I want to add an effect to the item selected after click. For example when I click to the first item 'Complémentaire forfait' I want to see an effect to know which item is selected from the list.
Here is my HTML. I want to know if I can do what I want with Javascript or jQuery?
<div data-toggle="collapse" data-target="#architect" aria-expanded="false" aria-controls="collapseExample">
<a class="mdc-list-item" data-toggle="tooltip" data-placement="top" title="Acceuil" style="cursor:pointer;width:350px">
<i class="architect_aarrow material-icons" style="margin-right:10px">
add_circle_outline
</i>Architectes, Ingénieurs et Techniciens
</a>
</div>
<div class="collapse" id="architect" style="margin-left:6px">
<nav id="icon-with-text-demo" class="mdc-drawer__content mdc-list" style="width:100%">
<a class="mdc-list-item" tauxPlafonds="CPAIT" data-toggle="tooltip" data-placement="top" title="Acceuil" style="cursor:pointer;width:350px">
Complémentaire forfait
</a>
<a class="mdc-list-item" tauxPlafonds="PLACPAIT" data-toggle="tooltip" data-placement="top" title="Acceuil" style="cursor:pointer;width:350px">
Plafonds complémentaire
</a>
<a class="mdc-list-item" tauxPlafonds="IDAIT" data-toggle="tooltip" data-placement="top" title="Acceuil" style="cursor:pointer;width:350px">
Invalidité décès
</a>
</nav>
</div>
My file js :
$("mdc-list-item").on("click", function () {
$(this).toggleClass("list-item-clicked");
});
My css :
.list-item-clicked{
border: 1px solid black;
}
You just have to declare a css rule like:
.list-item-clicked{
border: 1px solid black;
}
then add an on click listener to your list items and add or remove the css style to the items when clicked.
With jQuery you can use the toggleClass function.
an implementation could look like this:
$(".mdc-list-item").on("click", function(){
$( this ).toggleClass("list-item-clicked");
})
There you add the click listener to all of your items with css class "mdc-list-item" and toggle the class of the specific item.
Toggle class adds the class in parameter if the item does not has it already and removes it when it has it.
$('.mdc-list-item').on("click",function(){
var isClicked = $(this).hasClass("list-item-clicked"); // am I clicked?
$('.mdc-list-item').removeClass("list-item-clicked"); // un-click everything
if(!isClicked)
$(this).toggleClass("list-item-clicked"); // click me if needed
})
.list-item-clicked {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='mdc-list-item'>First title</a><br/>
<a class='mdc-list-item'>Second title</a><br/>
<a class='mdc-list-item'>Third title</a><br/>
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');
};