Question

我有以下部分代码：

<div id="code" class="bg-primary">

            <div class="code-output">rgb(0,0,0);<div class="btn btn-warning pull-right" id="reset">Reset</div></div>    

        </div>

问题是id =＆＃34; reset＆＃34;什么时候不会出现或者点击后会消失。有什么想法吗？这是我的css和一些js： CSS

#reset{
    position: relative;
bottom: 0.56em;
left: 0.5em;
}

JS

$('#reset').click(function(){
        $('.rgb').val(0);
        color="rgb(0,0,0)";
        $(".code-output").html(color+";");
        $("#rgbaOutput").css("background","black");
     });

Answer 1

在声明按钮之前，似乎要关闭代码输出的div，否则调用html（）方法将删除按钮。

另请注意我的JavaScript调整 - 在声明之前不要使用变量 - 因为它将转到全局对象（谈论颜色 var）。

额外建议：尝试使用引号保持一致。尝试保持代码缩进的一致性。另外，在运营商周围放置一个空间。所有这些小细节都提高了代码的可读性。

（我忽略了jQuery语句在示例代码中没有做任何事情，假设它会在你的完整上下文中做一些事情）

$("#reset").on("click", function () {
  var color = "rgb(0,0,0)";
  
  $(".rgb").val(0);      
  $(".code-output").html(color + ";");
  $("#rgbaOutput").css("background", "black");
});

#reset {
  position: relative;
  bottom: 0.56em;
  left: 0.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="code" class="bg-primary">

  <div class="code-output">rgb(0,0,0);</div>
  <div class="btn btn-warning pull-right" id="reset">Reset</div>
  
</div>

Answer 2

嗯，你这样说：

$(".code-output").html(color+";");

将取代<div class=".code-output">中的所有内容并显示rgb值。

因为你的重置div在这个div中，所以它会消失（显然）。

请改用：

<div class="code-output">rgb(0,0,0);</div> <!-- use </div> tag here -->
<div class="btn btn-warning pull-right" id="reset">Reset</div> <!-- instead of here -->

单击按钮后，按钮不会出现或消失

2 个答案: