如何使用简单的 jQuery 实现星级评定，它应该显示其价值

问题描述 投票：0回答：3

任何人都可以帮助使用下面的代码，我正在尝试使用查询来实现星级评级，这是我的代码如下

它显示为警报框，但我需要在 my rating

上显示该值

我为此使用了一个简单的查询，我需要显示单击每个锚标记时的值并显示每个标记的文本

例如当 首先单击标签，标签应为该标签的文本 1 希望你们能解决这个问题

<!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>

javascript html jquery
3个回答
2
投票

<!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>

0
投票

<!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>

0
投票

目前的解决方案是使用所选元素的内容来打开警报

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

第一个问题是如何使用 jquery 按类查询元素，当您执行 $('.stars span') 时，您会通过阅读代码本身得到答案，您正在使用 stars 类搜索该元素内的每个范围。

我们想要做的是搜索我的评级类别。有了它，我们就可以更改该元素的内部文本，jQuery 通过使用 .text(content) 函数来做到这一点。

最后一部分是如何首先获取开始内容，使用 jQuery，您可以遵循与更改 insideText 类似的路径，但不使用属性 jQuery 将返回而不是更改元素的内容。

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

如果你将来需要在没有 jQuery 的情况下做到这一点，你在 vanilla js 中有两种方法：

使用按类名获取元素 API，请确保在访问 insideText 属性之前测试列表是否有项目。这两个解决方案之间的区别在于，它们只会更改找到的第一个元素。

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

使用querySelector API，类似于jQuery

const myRatingEl = document.querySelector('.myrating')
// only chang inner text if the element was found
if (myRatingEl) {
  myRatingEl.innerText = 'example'
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.