如何组合多个JavaScript函数来构建星级评级系统

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

我正在运行 Windows 10 PC 上安装的 WAMP，用于存储在本地驱动器上的视频剪辑库。图库页面包含每个视频剪辑的缩略图和 5 星级评级系统。 星级评级系统使用名为“rateIt”的 JavaScript 模块。当星级更改时，新的评级值会在 mysql 数据库表中更新。

经过几周的阅读“rateIt”文档、在互联网上搜索工作示例以及大量的试验和错误，我终于有了按预期工作的每个拇指星级评级的 JavaScript 代码。

我的问题是每个图库页面包含数百个拇指，并且每个拇指的星级评级的 JavaScript 代码非常重复。 如何使用存储在同一页面上或从本地 js 文件使用的函数来减少星级评定所需的 JavaScript 代码量并将其用于每个拇指。

我确信对于在 JavaScript 编码方面有更多经验的人来说，这是非常基本的编码。我尝试在页面上创建一个函数并向其传递必要的变量，但每次尝试都会破坏星级评级系统。

您能提供的任何帮助将不胜感激:)

为了清楚起见，以下代码是用于其中一个拇指的星级评定系统的每个单独功能：

<div class="thumbContainer">
    <button class="btn-thumb" id="pic10" href="#M1"></button>
    <div class="starContainer">
        <div class="rateit rateit-bg" id="vid147800" data-rateit-step="1" ></div>
        <div><span id="vid147800sid"></span><span id="hover"></span></div>
<script type="text/javascript">
$("#vid147800").data('rateit-value', 3);

var tooltipvalues = ['delete', 'poor', 'ok', 'good', 'excellent'];
$("#vid147800").bind("over", function (event, value) { 
    $(this).attr("title", tooltipvalues[value - 1]); });
    
$("#vid147800").bind('rated', function (event, value) { 
    $("#vid147800sid").text("Rating saved " + value); });
    
$("#vid147800").bind("reset", function (event, value) { 
    $("#vid147800sid").text("Rating reset"); });

$("#vid147800").bind('rated reset', function () {  //updates value in database
    var value = $(this).rateit('value');           //when rating is changed
    var IDvid = "vid147800";
    $.ajax({
        url: 'assets/includes/update_ratings.php', //your server side script
        data: { IDvid: IDvid, value: value }, //our data
        type: 'POST'
    });
});
</script>
    </div>
</div>

我使用了一些变量并组合了函数。 我的前两个拇指的代码：

<div class="thumbContainer">
    <button class="btn-thumb" id="pic10" href="#M1"></button>
    <div class="starContainer">
        <div class="rateit rateit-bg" id="vid147800" data-rateit-step="1" ></div>
        <div><span id="vid147800sid"></span><span id="hover"></span></div>
<script type="text/javascript">
$("#vid147800").data('rateit-value', 3);  //value is updated from database
$('#vid147800').bind('rated reset', function () {
    var rtDivID = '#vid147800';         //values are updated from
    var IDvid = "vid147800";            //database on page load
    var value = $(this).rateit('value');
    var tooltipvalues = ['delete', 'poor', 'ok', 'good', 'excellent'];
    $(rtDivID).bind("over", function (event, value) { 
        $(this).attr("title", tooltipvalues[value - 1]); });
    $(rtDivID).bind('rated', function (event, value) { 
        $("#vid147800sid").text("Rating saved " + value); });
    $(rtDivID).bind("reset", function (event, value) { 
        $("#vid147800sid").text("Rating reset"); });
    $.ajax({
        url: 'assets/includes/update_ratings.php', //your server side script
        data: { IDvid: IDvid, value: value }, //our data
        type: 'POST'
    });
});
</script>
    </div>
</div>

<div class="thumbContainer">
    <button class="btn-thumb" id="pic20" href="#M2"></button>
    <div class="starContainer">
        <div class="rateit rateit-bg" id="vid899128" data-rateit-step="1" ></div>
        <div><span id="vid899128value"></span><span id="hoverVID"></span></div>
<script type="text/javascript">
$("#vid899128").data('rateit-value', 2);  //value is updated from database
$("#vid899128").bind('rated reset', function () {
    var rtDivID = '#vid899128';         //values are updated from
    var IDvid = "vid899128";            //database on page load
    var value = $(this).rateit('value');
    var tooltipvalues = ['delete', 'poor', 'ok', 'good', 'excellent'];
    $(rtDivID).bind("over", function (event, value) { 
        $(this).attr("title", tooltipvalues[value - 1]); });
    $(rtDivID).bind('rated', function (event, value) { 
        $("#vid899128value").text("Rating saved " + value); });
    $(rtDivID).bind("reset", function (event, value) { 
        $("#vid899128value").text("Rating reset"); });
    $.ajax({
        url: 'assets/includes/update_ratings.php', //your server side script
        data: { IDvid: IDvid, value: value }, //data
        type: 'POST'
    });
});
</script>
    </div>
</div>

这是使用 mysql 数据库中存储的数据生成每个图库拇指和星级的 php 代码。

<?php 
include_once 'assets/includes/media_header.php'; 

// Include the database config file 
include_once 'assets/includes/dbConfig.php'; 

// Fetch the info from database 
$query = "SELECT t1.*, t2.user_rating
            FROM xhtmlall t1
            LEFT JOIN star_ratings t2
            ON t1.IDvid = t2.IDvid
            WHERE page = '1' ORDER BY Idmstr";
$count = 0;
$result = $conn->query($query);
$count = mysqli_num_rows ($result );
if ($count > 0) { 
    echo $count . "<br>".PHP_EOL; 
    while($row = $result ->fetch_assoc()) {
        echo '<div class="thumbContainer">'.PHP_EOL;
        echo '<button class="btn-thumb" id='."'pic".$row['IDpic']."' href=".'"#M'.$row['IDdiv'].'"></button>'.PHP_EOL;
        echo '<div class="starContainer">'.PHP_EOL;
        echo '<div class="rateit" id="'.$row['IDvid'].'" data-rateit-step="1" ></div>'.PHP_EOL;
        echo '<div><span id="'.$row['IDvid'].'sid"></span><span id="hover"></span></div>'.PHP_EOL;
        echo '<script type="text/javascript">'.PHP_EOL;
        echo '$("#'.$row['IDvid'].'").data("rateit-value", '.$row['user_rating'].');'.PHP_EOL;
        echo '$("#'.$row['IDvid'].'").bind("rated reset", function () {'.PHP_EOL;
        echo 'var rtDivID = "#'.$row['IDvid'].'";'.PHP_EOL;
        echo 'var IDvid = "'.$row['IDvid'].'";'.PHP_EOL;
        echo 'var value = $(this).rateit("value");'.PHP_EOL;
        echo "var tooltipvalues = ['delete', 'poor', 'ok', 'good', 'excellent'];".PHP_EOL;
        echo '$(rtDivID).bind("over", function (event, value) {$(this).attr("title", tooltipvalues[value - 1]); });'.PHP_EOL;
        echo '$(rtDivID).bind("rated", function (event, value) {$("#'.$row['IDvid'].'sid").text("Rating saved " + value); });'.PHP_EOL;
        echo '$(rtDivID).bind("reset", function (event, value) {$("#'.$row['IDvid'].'sid").text("Rating reset"); });'.PHP_EOL;
        echo "$.ajax({url: 'assets/includes/update_ratings.php', data: { IDvid: IDvid, value: value }, type: 'POST' });".PHP_EOL;
        echo '});'.PHP_EOL;
        echo '</script>'.PHP_EOL;
        echo '</div></div>'.PHP_EOL;
javascript php html mysql
1个回答
0
投票

是的，您应该能够使用一个脚本块来完成此任务。

$("#vid147800").data('rateit-value', 3);

我看不到这个值在您显示的 JS 中的任何地方被访问 - 所以大概，评级脚本本身会在之后初始化时读取它 - 与评级容器上的 

data-rateit-step="1"
属性一样分区

因此删除这一行，并将 

data-rateit-value="3"
属性放在 div 上。 （当然，还有当前元素各自的评级值。）

<div><span id="vid147800sid"></span><span id="hover"></span></div>

第一个跨度应该有一个类，以便于选择 - 让我们在这里使用 

rateit-sid
。当您在循环中创建它时， 
id="hover"
可能会重复多次 - 但无法分辨它应该用于什么目的。

那么剩下的应该归结为这样：

var tooltipvalues = ['delete', 'poor', 'ok', 'good', 'excellent'];

$(".rateit").on("over", function (event, value) { 
    $(this).attr("title", tooltipvalues[value - 1]);
});
    
$(".rateit").on('rated', function (event, value) { 
    $(this).closest(".starContainer").find(".rateit-sid").text("Rating saved " + value);
});
    
$(".rateit").on("reset", function (event, value) { 
    $(this).closest(".starContainer").find(".rateit-sid").text("Rating reset");
});

$(".rateit").on('rated reset', function () {  //updates value in database
    var value = $(this).rateit('value');           //when rating is changed
    var IDvid = $(this).attr("id"); // get directly from the id attribute of the element
    $.ajax({
        url: 'assets/includes/update_ratings.php', //your server side script
        data: { IDvid: IDvid, value: value }, //our data
        type: 'POST'
    });
});
  • 我们不是通过 ID 选择单个元素，而是将其应用于所有 
    .rateit
    元素
  • 我在这里使用了
    .bind()
    ，而不是已弃用的
    .on()
  • 选择输出的范围是通过首先从当前元素向上到 
    .starContainer
    祖先，然后选择其中的 
    .rateit-sid
    元素

这未经测试，可能仍包含小错误或拼写错误。如果您将其放入外部脚本中，请确保它在 DOM 准备好后加载，或者将其全部包装到“准备好”处理程序中，https://learn.jquery.com/using-jquery-core/document-准备好了/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.