I am working on a web app, where i faced a problem. The problem is, I have a span element, and inside that span element there are two more span elements. Simply, two children of the parent span element. One of the children is shown in the parent element, When someone click on the shown children element then, it will get the index value of that children and will hide it, and will show the next sibling. I have written some code, but it just work on one click, and when i click the next sibling when it has been shown, then the first sibling never get shown. Below is my code :
HTML
<span class="ajlsst-wrap">
<span class="ajls-save-sec ajls-save">
<i class="fa fa-bookmark-o"></i>
<span class="ajls-labe">Save</span>
</span>
<span class="ajls-save-sec ajls-saved">
<i class="fa fa-check"></i>
<span class="ajls-labe">Saved</span>
</span>
</span>
$(".ajlsst-wrap").click(function(){
var _index = $(this).find(".ajls-save-sec").index();
console.log(_index);
if(_index == 0){
$(this).find(".ajls-save").hide();
$(this).find(".ajls-saved").show();
}
else{
$(this).find(".ajls-saved").hide();
$(this).find(".ajls-save").show();
}
})
I also have a problem , that is, the index of first child is always detect not of the second one which is shown on click, i don`t know why.
Do it this way
$(".ajls-save-sec").click(function(){
$(this).hide().siblings().show()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="ajlsst-wrap">
<span class="ajls-save-sec ajls-save">
<i class="fa fa-bookmark-o"></i>
<span class="ajls-labe">Save</span>
</span>
<span class="ajls-save-sec ajls-saved" style="display:none">
<i class="fa fa-check"></i>
<span class="ajls-labe">Saved</span>
</span>
</span>
Hope you get the concept.
You can directly use $(".ajls-save-sec").click instead of $(".ajlsst-wrap").click
You can use the simple next code
$(".ajls-save-sec").click(function(){ // no need for $(".ajlsst-wrap")
$(this).parent().find(".ajls-save-sec").show(); // show all spans
$(this).hide(); // hide the clicked one
})
.ajls-saved{
display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="ajlsst-wrap">
<span class="ajls-save-sec ajls-save">
<i class="fa fa-bookmark-o"></i>
<span class="ajls-labe">Save</span>
</span>
<span class="ajls-save-sec ajls-saved">
<i class="fa fa-check"></i>
<span class="ajls-labe">Saved</span>
</span>
</span>
<span class="ajlsst-wrap">
<span class="ajls-save-sec ajls-save">
<i class="fa fa-bookmark-o"></i>
<span class="ajls-labe">Save</span>
</span>
<span class="ajls-save-sec ajls-saved">
<i class="fa fa-check"></i>
<span class="ajls-labe">Saved</span>
</span>
</span>
<span class="ajlsst-wrap">
<span class="ajls-save-sec ajls-save">
<i class="fa fa-bookmark-o"></i>
<span class="ajls-labe">Save</span>
</span>
<span class="ajls-save-sec ajls-saved">
<i class="fa fa-check"></i>
<span class="ajls-labe">Saved</span>
</span>
</span>
Related
I'm trying to make a loop to show blog posts. Inside the loop, I use another loop to fetch blog likes. If the auth user liked a blog, then I want to show an unlike button, otherwise a like button. But the main loop keeps showing 2 buttons instead of one when multiple users like that blog.
<div class="post" v-show="blogs.length" v-for="blog in blogs" :key="blog.id">
<span v-for="like in blog.likes" :key="like.id">
<span v-if="blog.id === like.blog_id && like.user_id === authUserId">
<a href="#" class="link-black text-sm">
<i class="fas fa-thumbs-down mr-1"></i> UnLike ({{blog.likes.length}})
</a>
</span>
<span v-else>
<a href="#" class="link-black text-sm">
<i class="fas fa-thumbs-up mr-1"></i> Like ({{blog.likes.length}} )
</a>
</span>
</span>
</div>
What am I doing wrong?
condition are not working
Instead of using an inner loop, test once per blog if the user liked it:
<div class="post" v-show="blogs.length" v-for="blog in blogs" :key="blog.id">
<span v-if="blog.likes.find(like => like.blog_id === blog.id && like.user_id === authUserId)">
<a href="#" class="link-black text-sm">
<i class="fas fa-thumbs-down mr-1"></i> UnLike ({{blog.likes.length}})
</a>
</span>
<span v-else>
<a href="#" class="link-black text-sm">
<i class="fas fa-thumbs-up mr-1"></i> Like ({{blog.likes.length}})
</a>
</span>
</div>
Here is a demo
There is a button which must show a toggle only if a value is greater than 0. Otherwise it shouldn't do anything.
This is the code before adding ng-if:
<span >{{values.valuesNumber}}
<i class="fas fa-caret-down" ng-click="$ctrl.doSomething(values)">
</i>
</span>
I want to call the function from ng-click only when values.valuesNumber > 0.
So I added it like the following but it does not work.
<span >{{values.valuesNumber}} <i class="fas fa-caret-down">
<span ng-if="values.valuesNumber > 0">
<span ng-click="$ctrl.doSomething(values)">
</span>
</span>
</i></span>
use ng-show instead of ng-if. Because ng-if creates a scope of it's own.
<span >{{values.valuesNumber}} <i class="fas fa-caret-down">
<span ng-show="values.valuesNumber > 0">
<span ng-click="$ctrl.doSomething(values)">
</span>
</span>
</i></span>
Also please take a look at this discussion:
what is the difference between ng-if and ng-show/ng-hide
I want to add the class .my-class to body if tha class .views-exposed-form is present in #navbar-collapse-second
The code below does not work. How to correct ?
(function ($) {
$('#navbar-collapse-second').hasClass('views-exposed-form' {
$('body').addClass('my-class');
});
})(window.jQuery);
enter image description here
UPDATE
I applied the response of explv.
The class is removed in #navbar-collapse-second when .views-exposed-form is available.
But impossible to apply the same rule in #navbar-collapse-first when .views-manage-menu is available.
An idea ?
(function ($) {
if ($("#navbar-collapse-first .views-manage-menu").length) {
$(".icon-navbar-first-alert").removeClass("icon-navbar-first-alert-disable");
};
if ($("#navbar-collapse-second .views-exposed-form").length) {
$(".icon-navbar-second-alert").removeClass("icon-navbar-second-alert-disable");
};
})(window.jQuery);
First menu :
<a class="navbar-toggle-first collapsed" data-toggle="collapse" data-target="#navbar-collapse-first" aria-expanded="false">
<div class="icon-navbar-first">
<span class="fa-layers fa-3x">
<i class="far fa-circle"></i>
<span class="navbar-icon-open">
<i class="fas fa-bars" data-fa-transform="shrink-8"></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-first-alert icon-navbar-first-alert-disable">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<span class="navbar-icon-open">
<i class="fas fa-bars fa-stack-1x fa-inverse"></i>
</span>
<span class="navbar-icon-close">
<i class="fas fa-times fa-stack-1x fa-inverse"></i>
</span>
</span>
</div>
</a>
</div>
Second menu :
<div{{ attributes }}>
<a class="navbar-toggle-second collapsed" data-toggle="collapse" data-target="#navbar-collapse-second" aria-expanded="false">
<div class="icon-navbar-second">
<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-second-alert icon-navbar-second-alert-disable">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<span class="navbar-icon-open">
<i class="fas fa-filter fa-stack-1x fa-inverse"></i>
</span>
<span class="navbar-icon-close">
<i class="fas fa-times fa-stack-1x fa-inverse"></i>
</span>
</span>
</div>
</a>
</div>
enter image description here
enter image description here
The code that you have posted won't even run, the syntax is invalid, and hasClass(className) only accepts one parameter, so not entirely sure what you are trying to do there.
hasClass(className) returns true if the element you call it on has that class, it will not return true if a child element has the class, which I believe is what you are trying to do here.
Assuming your HTML has this rough structure:
<body>
<div id = "navbar-collapse-second">
<div class = "views-exposed-form">
</div>
</div>
</body>
The following code should work:
if ($("#navbar-collapse-second .views-exposed-form").length) {
$("body").addClass("my-class");
}
Explanation:
$("#navbar-collapse-second .views-exposed-form") will select an element with class views-exposed-form that is a child of the element with id navbar-collapse-second
If an element was found (.length is > 0), then we add the class to the body element:
$("body").addClass("my-class");
There is no condition in your code. Try the following:
if($('#navbar-collapse-second').hasClass('views-exposed-form')){
$('body').addClass('my-class');
}
I want to change the colour of an Awesome Icon, and I created this piece of code, but instead of giving me the colour, I got an 'undefined'
<script type="text/javascript">
function changeAIColor(idName) {
alert ($('idAwesomeIcon').css("color"));
}
</script>
<a href="#" th:onclick="'changeIconColor();'">
<span th:if="${#lists.contains(userMenus, menu)}">
<i id="idAwesomeIcon" class="fa fa-toggle-on fa-lg" style="color:#009900; text-align: center;" aria-hidden="true"></i>
</span>
<span th:if="${!#lists.contains(userMenus, menu)}">
<i d="idAwesomeIcon" class="fa fa-toggle-off fa-lg" style="color:#e6e6e6;" aria-hidden="true"></i>
</span>
</a>
You have missed the id selector # in your JQuery. Also use idName of the changeAIColor function in your selector. So, the query becomes ($('#'+idName).css("color"). Please note that you have used same id as idAwesomeIcon multiple times. id values should be used uniquely in HTML page.
function changeAIColor(idName) {
alert ($('#'+idName).css("color"));
}
changeAIColor('idAwesomeIcon');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" th:onclick="'changeIconColor();'">
<span th:if="${#lists.contains(userMenus, menu)}">
<i id="idAwesomeIcon" class="fa fa-toggle-on fa-lg" style="color:#009900; text-align: center;" aria-hidden="true"></i>
</span>
<span th:if="${!#lists.contains(userMenus, menu)}">
<i id="idAwesomeIcon" class="fa fa-toggle-off fa-lg" style="color:#e6e6e6;" aria-hidden="true"></i>
</span>
</a>
You need $('#idAwesomeIcon').css("color")
Also <i d="idAwesomeIcon" isn't right. The ID should be different and should actually be id="".
<script type="text/javascript">
$('.AwesomeIcon').each(function(){
alert ($(this).css("color"));
});
</script>
<a href="#" th:onclick="'changeIconColor();'">
<span th:if="${#lists.contains(userMenus, menu)}">
<i class="fa fa-toggle-on fa-lg AwesomeIcon" style="color:#009900; text-align: center;" aria-hidden="true"></i>
</span>
<span th:if="${!#lists.contains(userMenus, menu)}">
<i class="fa fa-toggle-off fa-lg AwesomeIcon" style="color:#e6e6e6;" aria-hidden="true"></i>
</span>
</a>
Change your ID to class and change your JS accordingly.
I've been wondering if it's possible to have a default element outside of ng-show event, I wish these codes will explain what I meant.
<th>
<a href="#" ng-click="orderByField='date'; reverseSortDate = !reverseSortDate">
Date Created
<span ng-show="orderByField == 'date'">
<span ng-show="!reverseSort">
<i class="icon-arrow-up active"></i>
<i class="icon-arrow-down"></i>
</span>
<span ng-show="reverseSort">
<i class="icon-arrow-up"></i>
<i class="icon-arrow-down active"></i>
</span>
</span>
</a>
</th>
<th>
<a href="#" ng-click="orderByField='mobile'; reverseSortMobile = !reverseSortMobile">
Mobile
<span ng-show="orderByField == 'mobile'">
<span ng-show="!reverseSortMobile">
<i class="icon-arrow-up active"></i>
<i class="icon-arrow-down"></i>
</span>
<span ng-show="reverseSortMobile">
<i class="icon-arrow-up"></i>
<i class="icon-arrow-down active"></i>
</span>
</span>
</a>
</th>
I want to create a table which has an arrow (up and down) indicating the orderBy direction(ascending or descending). It works as a charm by using the code above, but I want to create a default arrow (before it tells which way it ordered) which doesnt have any active style, that will appear before ng-click trigger, dissapear when ng-click trigger (which will be replaced with ng-show). and re-appear when the other th got clicked (replaced the ng-show active th class).
This is default: Arrow △▽
This is active: Arrow △▽ and Arrow △▽
Let's assume bold carets are arrows with active class.