私のIDをhtmlからjavascriptで取り除くことができます

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は、パレットを使用してプロジェクトを作成するときに（これはアイデアのために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のコメントに同意するだろうが、あなたは要素が正しいIDを持っていると仮定すると、あなたのjavascriptで行くしようとしている場合、私は準備ができて、ドキュメントを変更します

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

また、あなたの質問にあなたのhtmlとして何かを返す$('[type="range"]')これは任意の入力

が含まれていないかどうかを確認しかし、私が言うように - あなたの要件は、それが事前に定義されたパレットを持っている必要がありますている - これは使用に最適ですあなたがお互い

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); 
 
    }); 
 
});

<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">

を隠して、同じ色のdivタグやdivを重複し得ることはありませんので、私はいくつかの高さや色を変更している - 事前に定義されたパレット以下

はあなたのコードの作業であることに適用するクラス

Answer 2

皆さん、これは私の問題を修正しました。誰かが似たような問題を抱えている場合は、あなたの助けを借りて、ありがとうございます。

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