I got my first star-rating up and running, however, I am missing a single-part.
My HTML looks like this:
<div class="rating">
<a class="star-link" href="/vote?hack=3&rating=1">
<span class="glyphicon glyphicon-star-empty star inline star-active" data-hack="3" data-rating="1" id="3-star-1"></span>
</a>
<a class="star-link" href="/vote?hack=3&rating=2">
<span class="glyphicon glyphicon-star-empty star inline star-active" data-hack="3" data-rating="2" id="3-star-2"></span>
</a>
<a class="star-link" href="/vote?hack=3&rating=3">
<span class="glyphicon glyphicon-star-empty star inline star-active" data-hack="3" data-rating="3" id="3-star-3"></span>
</a>
<a class="star-link" href="/vote?hack=3&rating=4">
<span class="glyphicon glyphicon-star-empty star inline star-active" data-hack="3" data-rating="4" id="3-star-4"></span>
</a>
<a class="star-link" href="/vote?hack=3&rating=5">
<span class="glyphicon glyphicon-star-empty star inline" data-hack="3" data-rating="5" id="3-star-5"></span>
</a>
</div>
Here's my Javascript:
javascript:
$('span.star').hover(function() {
hack_id = this.dataset.hack;
rating = this.dataset.rating;
for (i = 1; i <= 5; i++) {
if (i <= rating) {
$('#' + hack_id + '-star-' + i).addClass('star-active');
} else {
$('#' + hack_id + '-star-' + i).removeClass('star-active');
}
}
});
Now, when I hover over the star(s) it applies the class just fine and also removes the class of those stars that are not needed.
My last problem though is that once the class(es) were applied and I move my mouse somewhere else, it does not undo the changes.
I pretty much need some kind of:
if (not hovering over any star)
remove all classes set before
endif
I know this is a very basic task but I can not seem to get through it.
Thank you all in advance!
you can use jquery's mouseout(): http://api.jquery.com/mouseout/
also, instead of using jquery to apply classes you can simply define in your css
.star-active:hover{
/*whatever you have in .start-active now*/
}
then you won't need any jquery/js for this
Related
I have tried using basic JavaScript when data-reviews="2" and it worked, but what I need is when data-reviews is less than 5 or any specific number, the whole <span> section should be hidden. I need assistance on this. I am trying to achieve the same outcome but I want to hide this, when data reviews has < 5.
<div class="collection-list-badge">
<span class="stamped-product-reviews-badge" data-id="5649263493270" style="display:block;">
<span class="stamped-badge" data-rating="5.0" data-lang="en" aria-label="Rated 5.0 out 42reviews"></span>
</span>
<span class="stamped-badge-caption" data-reviews="42" data-rating="5.0" data-label="reviews" aria-label="42 reviews" data-version="2">42</span>
</div>
Loop over the badge elements. For each collection badge select the review element. Parse the data-reviews attribute with parseInt. Check if the review is less than 5. If so, remove the collection badge element.
const collectionListBadges = document.querySelectorAll('.collection-list-badge');
for (const collectionListBadge of collectionListBadges) {
const reviewsElement = collectionListBadge.querySelector('[data-reviews]');
const amountOfReviews = parseInt(reviewsElement.getAttribute('data-reviews'));
if (amountOfReviews < 5) {
collectionListBadge.remove();
}
}
<div class="collection-list-badge">
<span class="stamped-product-reviews-badge" data-id="5649263493270" style="display:block;">
<span class="stamped-badge" data-rating="5.0" data-lang="en" aria-label="Rated 5.0 out 42reviews"></span>
</span>
<span class="stamped-badge-caption" data-reviews="42" data-rating="5.0" data-label="reviews" aria-label="42 reviews" data-version="2">42</span>
</div>
<div class="collection-list-badge">
<span class="stamped-product-reviews-badge" data-id="5649263493270" style="display:block;">
<span class="stamped-badge" data-rating="4.0" data-lang="en" aria-label="Rated 4.0 out 38reviews"></span>
</span>
<span class="stamped-badge-caption" data-reviews="4" data-rating="4.0" data-label="reviews" aria-label="38 reviews" data-version="2">4</span>
</div>
Goal: Change style of an element in a forEach loop
Issue: Style not being applied
In my loop, if I console.log(element), I do get the right list of filtered elements.
Running this works, but I want my function to modify every element that match my filter:
let contentPreview = document.querySelectorAll('.o_last_message_preview');
contentPreview[0].style.color = 'yellow'
All elements are correctly assigned.
function changeNotificationColor() {
// Notification button that opens list of notifications
let notifyButton = document.querySelector('.dropdown-toggle.o-no-caret[title="Conversations"]');
notifyButton.addEventListener('click', function () {
// List of notifications - each notification is contained in a .o_last_message_preview class
let contentPreview = document.querySelectorAll('.o_last_message_preview');
contentPreview.forEach(function (element) { if (element.innerText.includes('Marine')) {element.style.color = 'yellow'}})
})
}
changeNotificationColor();
HTML Notifications Dropdown button:
<a class="dropdown-toggle o-no-caret" data-toggle="dropdown" data-display="static" aria-expanded="true" title="Conversations" href="#" role="button">
<i class="o_mail_messaging_menu_icon fa fa-comments" role="img" aria-label="Messages"></i> <span class="o_notification_counter badge badge-pill">366</span>
</a>
HTML template of a notification node (each notification creates one of these nodes):
<div class="o_preview_info">
<div class="o_preview_title">
<span class="o_preview_name">
You have been assigned to Backorder xx
</span>
<span class="o_preview_counter">
(1)
</span>
<span class="o_last_message_date ml-auto mr-2"> 3 minutes ago </span>
</div>
<div class="o_last_message_preview">
Marine
</div>
<span title="Mark as Read" class="o_discuss_icon o_mail_preview_mark_as_read fa fa-check"></span>
</div>
I don't know what your issue is, but it's not in the code that you showed; this works fine:
let contentPreview = document.querySelectorAll('.o_last_message_preview');
contentPreview.forEach(function (element) { if (element.innerText.includes('Marine')) {element.style.color = 'yellow'}})
<div class="o_last_message_preview">This contains Marine</div>
<div class="o_last_message_preview">This does not</div>
<div class="o_other_message_preview">This has a different class</div>
I have a javascript function that increment a counter by 1 on onclick event.
<div class="detail-banner-btn heart">
<i class="fa fa-heart-o"></i>
<span data-toggle="I Love It">
<a onclick="like()"> Give Heart </a>
</span>
</div>
<i class="fa fa-heart"></i> <strong id="totalLikes" > 0 </strong> people love it
<script>
function like() {
var a = document.getElementById("totalLikes").innerHTML = +1;
}
</script>
I want the number to be increment by 1 at first click and on second click it needs to be decremented by 1 and so on.
Try following code
<div class="detail-banner-btn heart">
<i class="fa fa-heart-o"></i> <span data-toggle="I Love It"> <a onclick="like()"> Give Heart </a></span>
</div>
<script>
var isLiked=false;
var a=0;
function like()
{
isLiked=!isLiked;
if(isLiked) {
a = document.getElementById("totalLikes").innerHTML = parseInt(a)+1;
}
else {
a = document.getElementById("totalLikes").innerHTML = parseInt(a)-1;
}
}
</script>
<i class="fa fa-heart"></i> <strong id="totalLikes" > 0 </strong> people love it
Let's assume that you have a like button, a comment button, and an area for likes, such as the code below:
<a href="#" id="like-btn" class="card-link">
<i class="fa fa-heart"></i>
</a>
<a href="#" class="card-link">
<i class="fa fa-comment"></i>
</a>
<p>Likes <span>0</span></p>
It would make sense to use jQuery here, and simply update the likes by setting a counter in the JavaScript section of your code (or in a separate file). This way, you don't have to convert the counter to an integer (or number type in JavaScript), or any of that. This is where jQuery makes things much more simple.
var likes = 0;
$('#like-btn').on('click', function() {
if(likes % 2 === 0) {
likes++;
$('span').text(likes);
}
else {
likes--;
$('span').text(likes);
}
});
This why you can just increment the number of likes in a more simple way. If the number has no remainder after being divided by 2, you know it is even, and needs to be incremented (and will increment on your first click), otherwise it will be deincremented.
Apologies if the question title is a little vague, I'm still a beginner in javascript (I'm open to edit suggestions!). If you look at the screenshot above I have 5 input boxes with values in it. These values are ratings returned by Google Places APIs and every time a user searches a new location these values will change. I'm displaying them like so.(I'll use the Gym option as an example).
Gymcallback function (Calucluates an average rating for all gyms in the area)
function gymCallback(results2, status2) {
var totalRating = 0,
ratedCount = 0;
results2.forEach(function( place ) {
if (place.rating !== undefined) {
ratedCount++;
totalRating += place.rating;
}
});
var averageRating = results2.length == 0 ? 0 : totalRating / ratedCount;
var averageRatingRounded = averageRating.toFixed(1);
var averageGymRatingTB = document.getElementById('gymAvgRating');
averageGymRatingTB.value = averageRatingRounded;
}
The averageGymRatingTB value will then be passed into the input box in the screenshot like so:
<p>
Gyms:
<input type="text" size="10" name="gymAvgRating" id="gymAvgRating" />
</p>
My question is, is it possible to display the gym rating next "fitness" in the navbar?
Fitness list option in the navbar
<li data-toggle="collapse" data-target="#fitness" class="collapsed">
<a onclick="clearMarkers();GymReport();" href="#"><i class="fa fa-heart fa-lg"></i> Fitness <span
class="arrow"></span></a>
</li>
I've looked at using the following approach by adding an innerhtml element using 'test' as the value I'm passing through but this won't work, so I'm unsure.
<li data-toggle="collapse" data-target="#fitness" class="collapsed">
<a onclick="clearMarkers();GymReport();" href="#"><i class="fa fa-heart fa-lg"></i> Fitness <span
class="arrow"></span></a><h5 id = demo></h5>
</li>
And in my javascript I use this:
document.getElementById("demo").innerHTML = "test";
You can simply add a span to the navigation, store it in a variable and change the content of using innerText.
function clearMarkers() {}
function GymReport() {}
var a = document.querySelector('li[data-target="#fitness"] > a'); //get the a in the menu
var fitnessScore = document.createElement("span"); //create a new span
a.appendChild(fitnessScore); // add the span to the a
function changeValue(v) {
fitnessScore.innerText = Math.random();
}
<ul>
<li data-toggle="collapse" data-target="#fitness" class="collapsed">
<a onclick="clearMarkers();GymReport();" href="#"><i class="fa fa-heart fa-lg"></i> Fitness <span
class="arrow"></span></a>
</li>
</ul>
<input type="button" onclick='changeValue()' value="Change value">
Thanks so much for the help.
Here is the code:
<div class="UserActions UserActions--small u-textLeft">
<div class="user-actions btn-group not-following not-muting " data-user-id="1364896129" data-screen-name="VWnews" data-name="Volkswagen USA News" data-protected="false">
<span class="UserActions-moreActions u-inlineBlock">
<button type="button" class="js-tooltip unmute-button btn small plain-btn" title="Unmute #VWnews" data-placement="top">
<span class="Icon Icon--muted Icon--medium"><span class="visuallyhidden">Unmute #VWnews</span></span>
</button><button type="button" class="first-load js-tooltip mute-button btn small plain-btn" title="Mute #VWnews" data-placement="top">
<span class="Icon Icon--unmuted Icon--medium"><span class="visuallyhidden">Mute #VWnews</span></span>
</button>
<div class="dropdown ">
<button type="button" class="user-dropdown dropdown-toggle js-dropdown-toggle js-link js-tooltip btn plain-btn small-user-dropdown" aria-haspopup="true" data-original-title="More user actions">
<span class="user-dropdown-icon Icon Icon--cog Icon--small"><span class="visuallyhidden">User Actions</span></span>
</button>
<div class="dropdown-menu">
<div class="dropdown-caret">
<span class="caret-outer"></span>
<span class="caret-inner"></span>
</div>
<ul>
Trying to click everything containing
<div class="user-actions btn-group not-following not-muting "
The string you are attempting to pass to document.querySelectorAll() does not have legal quoting and thus causes an error.
The string is this:
"[div class='user-actions btn-group not-following not-muting including "']"
which seems to have an extra " near the end. Perhaps is should be this:
"[div class='user-actions btn-group not-following not-muting including']"
But, then looking at that string, I don't see what useful selector you're even making with that. Selectors don't specify class='xxx' in them.
Now that you've edited your question a bit, I think you can just use this:
$(".user-actions.btn-group.not-following.not-muting").click();
This will call the click event on any element that has all of the above classes on it. Since you're question is tagged with jQuery, I used jQuery for the solution.
In CSS selectors, you precede a classname with a . to indicate to the selector query that this is a class name. If you have multiple class names with no space between them, then all those class names must exist on the same object for it to match.
In plain Javascript, you can do this:
var items = document.querySelectorAll(".user-actions.btn-group.not-following.not-muting");
for (var i = 0; i < items.length; i++) {
items[i].click();
}
And, you can see it work here: http://jsfiddle.net/jfriend00/3acy178k/