How to implement star rating using simple jQuery and it should show value by its side

user_14848547 0
Viewed 325

can anyone please help with the below code I'm trying to implement star rating using query here is my code below

it's showing as an alert box but I need to show the value on myrating

I have used a simple query for this I need to show the value on clicking each anchor tag and shows the text of each tag

for example when first a tag is is clicked the label should the text of that a tag 1 hope you guys get the issue

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .stars a {
            display: inline-block;
            padding-right: 4px;
            text-decoration: none;
            margin: 0;
        }
        
        .stars a:after {
            position: relative;
            font-size: 18px;
            font-family: 'FontAwesome', serif;
            display: block;
            content: "\f005";
            color: #9e9e9e;
        }
        
        span {
            font-size: 0;
            /* trick to remove inline-element's margin */
        }
        
        .stars a:hover~a:after {
            color: #9e9e9e !important;
        }
        
        span.active a.active~a:after {
            color: #9e9e9e;
        }
        
        span:hover a:after {
            color: blue !important;
        }
        
        span.active a:after,
        .stars a.active:after {
            color: blue;
        }
    </style>
</head>

<body>
    <p class="stars">
        <label class="myrating">0</label>
        <span>
          <a class="star-1" href="#">1</a>
          <a class="star-2" href="#">2</a>
          <a class="star-3" href="#">3</a>
          <a class="star-4" href="#">4</a>
          <a class="star-5" href="#">5</a>
        </span>
    </p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $('.stars a').on('click', function() {
            $('.stars span, .stars a').removeClass('active');

            $(this).addClass('active');
            $('.stars span').addClass('active');
            alert($(this).text());
        });
    </script>
</body>

</html>

html jquery javascript
3 Answers

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .stars a {
            display: inline-block;
            padding-right: 4px;
            text-decoration: none;
            margin: 0;
        }
        
        .stars a:after {
            position: relative;
            font-size: 18px;
            font-family: 'FontAwesome', serif;
            display: block;
            content: "\f005";
            color: #9e9e9e;
        }
        
        span {
            font-size: 0;
            /* trick to remove inline-element's margin */
        }
        
        .stars a:hover~a:after {
            color: #9e9e9e !important;
        }
        
        span.active a.active~a:after {
            color: #9e9e9e;
        }
        
        span:hover a:after {
            color: blue !important;
        }
        
        span.active a:after,
        .stars a.active:after {
            color: blue;
        }
    </style>
</head>

<body>
    <p class="stars">
        <label class="myrating">0</label>
        <span>
          <a class="star-1" href="#">1</a>
          <a class="star-2" href="#">2</a>
          <a class="star-3" href="#">3</a>
          <a class="star-4" href="#">4</a>
          <a class="star-5" href="#">5</a>
        </span>
    </p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $('.stars a').on('click', function() {
            $('.stars span, .stars a').removeClass('active');

            $(this).addClass('active');
            $('.stars span').addClass('active');
            alert($(this).text());
            $('.myrating').html($(this).text()); 
        });
    </script>
</body>

</html>

user_60579150 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .stars a {
            display: inline-block;
            padding-right: 4px;
            text-decoration: none;
            margin: 0;
        }
        
        .stars a:after {
            position: relative;
            font-size: 18px;
            font-family: 'FontAwesome', serif;
            display: block;
            content: "\f005";
            color: #9e9e9e;
        }
        
        span {
            font-size: 0;
            /* trick to remove inline-element's margin */
        }
        
        .stars a:hover~a:after {
            color: #9e9e9e !important;
        }
        
        span.active a.active~a:after {
            color: #9e9e9e;
        }
        
        span:hover a:after {
            color: blue !important;
        }
        
        span.active a:after,
        .stars a.active:after {
            color: blue;
        }
    </style>
</head>

<body>
    <p class="stars">
        <label class="myrating">0</label>
        <span>
          <a class="star-1" href="#">1</a>
          <a class="star-2" href="#">2</a>
          <a class="star-3" href="#">3</a>
          <a class="star-4" href="#">4</a>
          <a class="star-5" href="#">5</a>
        </span>
    </p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $('.stars a').on('click', function() {
            $('.stars span, .stars a').removeClass('active');

            $(this).addClass('active');
            $('.stars span').addClass('active');
            $('.myrating').html($(this).text());
        });
    </script>
</body>

</html>

user_87735010

The current solution is using the content of the selected element to open the alert

alert($(this).text());

The first question is how to query an element by class using jquery, and you have the answer reading the code itself when you do $('.stars span') you are searching for every span inside that element with the stars class.

What we want to do is search for that myrating class. With that in hand, we can change the innerText of that element, jQuery does this by using the .text(content) function.

And the last part is how do you get the start content in the first place, using jQuery you can follow a similar path you took to change the innerText but using no attribute jQuery will return instead of change the content of the element.

$('.myrating').text($(this).text())

If you need to do it in the future without jQuery you have two ways in vanilla js:

Using the get elements by class name API, make sure you test if the list has an item before accessing the innerText property. The difference between those two solutions is that they will change only the first element it finds.

const myRatingEl = document.getElementsByClassName('myrating')
// only change innerText if at least one element was found
if (myRatingEl.length > 0) {
    myRatingEl[0].innerText = 'example'
}

Using the querySelector API, which is similar to jQuery

const myRatingEl = document.querySelector('.myrating')
// only chang inner text if the element was found
if (myRatingEl) {
  myRatingEl.innerText = 'example'
}
user_15494630
Related