为不同的项目获得多个不同的评级以工作

Posted 2023-05-09

【中文标题】为不同的项目获得多个不同的评级以工作

【英文标题】：Getting multiple different ratings for different items to work

【发布时间】：2020-09-18 19:09:57

【问题描述】：

因此，我一直在尝试为多个项目获得星级评分，但就我的代码而言，我认为他们正在为自己使用彼此的评分。

html：

                <div class="thumbnail">
                    <img src="https://images.unsplash.com/photo-1470315232801-e91a8bb8adb6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1248&q=80" />
                    <div class="caption">
                        <h3>Buck Moon</h3>
                        <p>Alan Emory</p>
                        <p>32 upvotes</p>
                        <div class="row">
                            <div class="col-md-offset-1">
                                <span class="fa fa-star checked" onmouseover="starmark(this)" onclick="" starmark(this) id="1three" style="font-size:40px;cursor:pointer"></span>
                                <span class="fa fa-star checked" onmouseover="starmark(this)" onclick="" starmark(this) id="2three" style="font-size:40px;cursor:pointer"></span>
                                <span class="fa fa-star checked" onmouseover="starmark(this)" onclick="" starmark(this) id="3three" style="font-size:40px;cursor:pointer"></span>
                                <span class="fa fa-star checked" onmouseover="starmark(this)" onclick="" starmark(this) id="4three" style="font-size:40px;cursor:pointer"></span>
                                <span class="fa fa-star checked" onmouseover="starmark(this)" onclick="" starmark(this) id="5three" style="font-size:40px;cursor:pointer"></span>
                                <br />
                                <button class="btn2 btn-default" onclick="showrating()"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

我已将按钮设置为评分提交，但不确定为什么它会保留其他星级评分实例。

如何使用单独的文件或我需要做的任何事情来解决此问题以使它们应用于不同的按钮？此外，我尝试重命名评级，但它仍然保留在按钮中。

【问题讨论】：

onclick="" starmark(this) 似乎并不是一个有效的代码。能否请您分享一下您的 JS？

我没有 JS 文件。我想知道如何在JS中做到这一点。对于我的问题的措辞错误，我深表歉意。在悬停星级后使用提交按钮是目前的工作方式。

【参考方案1】：

你可以这样做：

function starmark(el) 
  $(".fa-star").removeClass("active");
  $(el).addClass("active");


function showrating() 
  let rating = $(".fa-star.active").attr("id").charAt(0);
  console.log(rating);

.active 
  color:red;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
      <div class="col-md-offset-1">
        <span class="fa fa-star checked" onmouseover="starmark(this)" onclick="starmark(this)"  id="1three" style="font-size:40px;cursor:pointer">1</span>
        <span class="fa fa-star checked" onmouseover="starmark(this)" onclick="starmark(this)"  id="2three" style="font-size:40px;cursor:pointer">2</span>
        <span class="fa fa-star checked" onmouseover="starmark(this)" onclick="starmark(this)"  id="3three" style="font-size:40px;cursor:pointer">3</span>
        <span class="fa fa-star checked" onmouseover="starmark(this)" onclick="starmark(this)"  id="4three" style="font-size:40px;cursor:pointer">4</span>
        <span class="fa fa-star checked" onmouseover="starmark(this)" onclick="starmark(this)"  id="5three" style="font-size:40px;cursor:pointer">5</span>
        <br />
        <button class="btn2 btn-default" onclick="showrating()">ShowRating</button>
      </div>
    </div>

【讨论】：

谢谢。我假设第一个是 js 文件，第二个是 CSS 文件，第三个是主 HTML 文件，对吗？

@bingo9499 没错，尽管所有这些都可以使用

好的。只是将其分开以确保我的主干不会被淹没。

@bingo9499 很高兴能为您提供帮助。如果这回答了您的问题，请检查答案旁边的复选标记，将您的问题解决为已解决/已回答。

我现在唯一遇到的问题是按钮没有显示警报。但是，这是一个不同的问题。