点击颜色按钮后在Output容器显示对应颜色的代码问题求助

问题说明 #

点击页面上的红、蓝、绿按钮后，需要在#output标签中显示对应的颜色名称；已通过colorbutton类给三个按钮绑定同一个事件处理器，但无法正确捕获对应值，希望通过按钮的ID属性区分点击目标。

错误原因 #

原JavaScript代码中，已经通过$(this).attr("id")获取到了点击按钮的ID值并赋值给colorid变量，但后续更新#output内容时，错误使用了未定义的color变量，导致无法正常显示内容。

修正后的代码 #

JavaScript核心修正代码

$(document).ready(function() {
  $(".colorbutton").on("click", function() {
    // 获取点击按钮的ID
    var colorid = $(this).attr("id");
    // 也可以选择获取按钮的完整文本：var colorName = $(this).val();
    // 更新output内容并添加淡入效果
    $("#output").stop(true, true).hide().html(colorid.toUpperCase()).stop(true, true).show("fade", 1500);
  });
});

如果希望显示和按钮上完全一致的文本（比如"RED Color"），只需把colorid.toUpperCase()替换为$(this).val()即可。

完整可运行代码

<html>
<head>
  <title>Crayon Color Factory</title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
  <style>
    body {
      background-image: url("https://newton.ncc.edu/gansonj/ite154/img/crayons.jpg");
      font-family: arial;
      text-align: right;
      color: #008B8B;
    }

    #pagewrap {
      border: 8px #800000 solid;
      padding: 10px;
      width: 600px;
      border-radius: 25px;
      text-align: center;
      background: white;
      margin: 40px auto 0px auto;
    }

    #title {
      font-size: 2.2em;
      border-bottom: 7px #008B8B double;
      padding: 10px 0px 10px 0px;
      color: #008B8B;
      text-align: center;
    }

    .colorbutton {
      color: white;
      cursor: pointer;
      padding: 5px 0px 5px 0px;
      border: 3px solid #CCCC99;
      border-radius: 25px;
      width: 150px;
    }

    .colorbutton:hover {
      background: #CCCCCC;
      color: yellow;
      border: 3px solid #003366;
    }

    #output {
      font-size: 5em;
      padding-top: 100px;
      width: 200px;
      height: 100px;
      margin: 30px auto 30px auto;
      border: 5px black double;
      font-size: 1em;
      font-family: arial;
    }
  </style>
</head>
<body>
  <div id="pagewrap">
    <div id="title">Crayon Color Factory</div>
    <div id="formwrap" style="margin-top: 30px;">
      <input type="button" class="colorbutton" id="red" style="background-color:red;" value="RED Color">
      <input type="button" class="colorbutton" id="blue" style="background-color:blue;" value="BLUE Color">
      <input type="button" class="colorbutton" id="green" style="background-color:green;" value="GREEN Color">
      <div id="output">Change Me!!!!!</div>
    </div>
  </div>
  <script>
    $(document).ready(function() {
      $(".colorbutton").on("click", function() {
        var colorid = $(this).attr("id");
        $("#output").stop(true, true).hide().html(colorid.toUpperCase()).stop(true, true).show("fade", 1500);
      });
    });
  </script>
</body>
</html>

关键修正点 #

• 替换未定义的color变量为实际获取到的colorid变量
• 可选：使用toUpperCase()让颜色名称大写显示，和按钮文本风格统一
• 灵活选择：可以读取按钮的value属性获取完整按钮文本，适配不同显示需求

内容的提问来源于stack exchange，提问作者Rasel Islam