Question

我正在做调色板，它需要有一个预定义的调色板，然后选择它的颜色，事情是它必须是可变的，为此我已经有了这个解决方案

            <div class='colorScope'>
                <div id="colorBackgroundDark<%=project.id%>">
                    <div id="Dark1<%=project.id%>">
                    </div>
                    <div id="Dark2<%=project.id%>">
                    </div>
                </div>
                <div id="colorBackgroundLight<%=project.id%>">
                    <div id="Light1<%=project.id%>">
                    </div>
                    <div id="Light2<%=project.id%>">
                    </div>
                </div>
            </div>

项目ID由rails提供，当创建带有调色板的项目时（这是该想法的html）

这是Js应该制作可变的调色板并且由于某种原因不能正常工作我无法弄清楚，我真的希望你们可以请帮助我，请再次考虑我是一个菜鸟并且是跟我说：x

function colorPalettes(id){
    var myElement = document.getElementById('colorBackgroundDark'+id);
    myElement.style.backgroundColor = "#D93600";
    myElement.style.width = "50%";
    myElement.style.height = "256px";

    var myElement3 = document.getElementById('Dark1'+id);
    myElement3.style.backgroundColor = "#D93600";
    myElement3.style.width = "50%";
    myElement3.style.height = "256px";

    var myElement4 = document.getElementById('Dark2'+id);
    myElement4.style.backgroundColor = "#D93600";
    myElement4.style.width = "50%";
    myElement4.style.height = "256px";

    var myElement2 = document.getElementById('colorBackgroundLight'+id);
    myElement2.style.backgroundColor = "#ffffff";
    myElement2.style.width = "50%";
    myElement2.style.height = "256px";

    var myElement5 = document.getElementById('Light1'+id);
    myElement5.style.backgroundColor = "#00474E";
    myElement5.style.width = "50%";
    myElement5.style.height = "256px";


    var myElement6 = document.getElementById('Light2'+id);
    myElement6.style.backgroundColor = "#6CEEFC";
    myElement5.style.width = "50%";
    myElement5.style.height = "256px";
}


$( document ).ready(function() {
    var id = $('[type="range"]').attr('id')
    colorPalettes(id);
});

Answer 1

我同意j-dexx的css评论，但是如果你打算使用你的javascript，假设元素具有正确的id，我会将你的文档改为：

$('[type="range"]').each(function() {
    colorPalettes(this.id);
});

同时检查此$('[type="range"]')是否会返回任何内容，因为您的问题中的html不包含任何输入

但正如我所说 - 你的要求是它需要有一个预定义的调色板 - 这非常适合使用类来应用预定义的托盘

以下是你的代码工作 - 我已经改变了一些高度和颜色，所以你不会得到相同颜色的重叠div或div相互隐藏

＆＃13;

function colorPalettes(id) {
  var myElement = document.getElementById('colorBackgroundDark' + id);
  myElement.style.backgroundColor = "#D93600";
  myElement.style.width = "100%";
  myElement.style.height = "532px";

  var myElement3 = document.getElementById('Dark1' + id);
  myElement3.style.backgroundColor = "#ff0000";
  myElement3.style.width = "50%";
  myElement3.style.height = "256px";

  var myElement4 = document.getElementById('Dark2' + id);
  myElement4.style.backgroundColor = "#ee3333";
  myElement4.style.width = "50%";
  myElement4.style.height = "256px";

  var myElement2 = document.getElementById('colorBackgroundLight' + id);
  myElement2.style.backgroundColor = "#ffffff";
  myElement2.style.width = "100%";
  myElement2.style.height = "532px";

  var myElement5 = document.getElementById('Light1' + id);
  myElement5.style.backgroundColor = "#00474E";
  myElement5.style.width = "50%";
  myElement5.style.height = "256px";


  var myElement6 = document.getElementById('Light2' + id);
  myElement6.style.backgroundColor = "#6CEEFC";
  myElement6.style.width = "50%";
  myElement6.style.height = "256px";
}
$(document).ready(function() {
  $('[type="range"]').each(function() {
    colorPalettes(this.id);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="colorScope">
  <div id="colorBackgroundDarktest1">
    <div id="Dark1test1"></div>
    <div id="Dark2test1"></div>
  </div>
  <div id="colorBackgroundLighttest1">
    <div id="Light1test1"></div>
    <div id="Light2test1"></div>
  </div>
</div>

<input id="test1" type="range" min="0" max="20" step="5">

＆＃13;

Answer 2

伙计这解决了我的问题，非常感谢你的帮助，如果有人有类似的问题，你可以使用它。

$( document ).ready(function() {
    $('[type="range"]').each(function(){
        colorPalettes(this.id);
    })

无法通过javascript从html获取我的id以给他们样式

2 个答案: