<div"> <div"> <div" />

クリックでjQuery/JavaScript、リストIDの名前

まず第一に、私のJavaScriptは非常に限られているので、私はちょうどどこから始めればいいのか分からないので、私はこれで私自身で何かを試してみません

だから、私は私のウェブサイトにこの構造を持っています、

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

ul{list-style-type: none;padding:0}
<button class="clickme" type="button">Click Me!</button>

  • <input type="text" class="color_input" value="ffffff">
  • <input type="text" class="color_input" value="000000">
  • <!--There will be at least 30-40 of elements like this that contains text input tags--> <!--And, this list arent always have Text inputs tags, there are also other tags for example, radio, select...etc--> <!--
  • <input type="radio" class="radio_input" value="toggle">
  • -->
<div class="list"> </div>
</div> </div>

Basically, A bunch of li tags that each one have a specific ID and each of this list contains a text input tag that they have a class named color_input

そのため、jQueryで clickme ボタンをクリックすると、すべての li ID 名前を入力に表示します。 div
たとえば、 clickme ボタンをクリックすると、このようなリストが表示されます。

'colors_body' => 'ffffff',  
'colors_wrapper' => '000000',  
'colors_footer' => '575757',  

EDIT: But I need to get a list that the text input tags used for colors only, this should be easy to map the list because this input tags have a specfic class named color_input The reason for that because there are other input types like radio, select...etc

3
こんにちは、はい、少なくとも40-50の要素がこのようにあります:) IDはcolors_ :)で始まるので、[id ^ = 'colors_']のようなもので見つけるのは問題ないでしょうか?
追加された 著者 Nippledisaster,
あなたはそれらの3つだけが欲しいですか?もっとあるだろうか?この3つを探すのではなく、これらすべてを動的に調べて、それらすべてを「見つける」ことができる部分がありません。それ以外の場合は、それらにクラスを貼り付け、そのクラスでそれらすべてを見つけます。
追加された 著者 Taplar,

5 答え

リスト項目に純粋なJS: Array.prototype.forEach を使うことでこれを実現できます。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

document.querySelector(".clickme").addEventListener("click", function(){
  
  var div = document.querySelector("div.list");
  //Iterate over every li
  Array.prototype.forEach.call( document.querySelectorAll("ul > li[id^='color_']"), function(element){
    var node = document.createTextNode(element.id + " => " + element.querySelector("input").value);
    div.appendChild(node);
    div.appendChild(document.createElement("br"));
  });
  
}, true);// assign click handler to button
ul{list-style-type: none;padding:0}
<button class="clickme" type="button">Click Me!</button>

  • <input type="text" value="ffffff">
  • <input type="text" value="000000">
<div class="list"> </div>
</div> </div>

1
追加された
私はjQueryがAppleのようだと思います。それはより短くて、あなたの手から仕事を取り除きます、しかし、あなたがそれから始めて、JavaScriptの内部の働きを得ることは難しいです。したがって、OPが純粋なJSを要求する場合は、純粋に(またはその両方で)答えることをお勧めします。ここでの答えの違いは両方の選択肢に役立ちます。
追加された 著者 Mouser,

次のようにイベントクリックを clickme ボタンに付ける必要があります。

$('.clickme').on('click', function(){
  //Your logic here
});

次に、 each()メソッドを使用してすべての li をループ処理し、jQueryメソッド append()を使用して値を div に割り当てます。

$('div').append( $(this).attr('id') + ' => ' + $('input', this).val() + '
' );

お役に立てれば。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('.clickme').on('click', function(){
  $('ul li').each(function(){
     $('div').append( $(this).attr('id')+' => '+$('input', this).val()+'
' ); }) });
ul{list-style-type: none;padding:0}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="clickme" type="button">Click Me!</button>

  • <input type="text" value="ffffff">
  • <input type="text" value="000000">
<div class="list"> </div>
</div> </div>

1
追加された

Use querySelectorAll & children to get the relevant data.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

document.getElementById('clickMe').addEventListener('click', function() {
  let inputText = "";
  var obj = {};
  document.querySelectorAll('li').forEach(function(item) {
    inputText += item.id + ' ' + item.children[0].value + '
' }) document.getElementsByClassName('list')[0].innerHTML = inputText })
ul {
  list-style-type: none;
}
<button class="clickme" type="button" id="clickMe">Click Me!</button>

  • <input type="text" value="ffffff">
  • <input type="text" value="000000">
<div class="list"> </div>
</div> </div>

1
追加された

最初に必要なマップでオブジェクトを作成し、それを list に追加します - 下記のデモをご覧ください。

jQuery solution:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('.clickme').click(function() {
  $('ul li').map(function() {
    return {
      name: this.id,
      value: $(this).find('input').val()
    }
  }).get().forEach(function(e) {
    $('.list').append('<div>' + e.name + ' => ' + e.value + '</div>');
  });
});
ul {list-style-type: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="clickme" type="button">Click Me!</button>
  • <input type="text" value="ffffff">
  • <input type="text" value="000000">
<div class="list"></div>
</div> </div>

Javascript solution:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

document.querySelector('.clickme').addEventListener('click', function() {
  Array.prototype.map.call(document.querySelectorAll('ul li'), function(e) {
    return {
      name: e.id,
      value: e.querySelector('input').value
    }
  }).forEach(function(e) {
  
    document.querySelector('.list').innerHTML += '<div>' + e.name + ' => ' + e.value + '</div>';
  });
});
ul {list-style-type: none;}
<button class="clickme" type="button">Click Me!</button>
  • <input type="text" value="ffffff">
  • <input type="text" value="000000">
<div class="list"></div>
</div> </div>

1
追加された

当然のことながら、これをjQueryで行うのは簡単なことではありません。

このように要素 .clickme をクリックする必要があります。

$('.clickme').click(function() {
});

その中で、jQueryの .each()ループを使用して、すべての li に対して関数を実行します。そのIDは colors_ で始まります。

  $('li[id^="colors_"]').each(function() {
  });

その中で、要素のIDとテキストを取得し、それを使って好きなことをします(この例では console.log ged)。

    console.log($(this).attr('id') + " => " + $(this).children('input[type=text]').val());

<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

$('.clickme').click(function() {
  $('li[id^="colors_"]').each(function() {
    console.log($(this).attr('id')+" => "+$(this).children('input[type=text]').val());
  });
});
ul {
  list-style-type: none;
  padding: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button class="clickme" type="button">Click Me!</button>
  • <input type="text" value="ffffff">
  • <input type="text" value="000000">
</div> </div>

1
追加された
遅れてすみません、あなたの答えはまさに私が探していたものです:)ありがとう。
追加された 著者 Nippledisaster,
おっと、正直言って間違いだったのですが私は自分の投稿をたくさん編集しましたが、今はすべてうまくいっています、ありがとうございます
追加された 著者 Nippledisaster,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript