JavaScript 从数组中存储 Id

Question

我试图获取所有具有公共(public)类名的 id 并使用以下代码将它们存储为数组(这可以正常工作):

var ids = $('.idSelect').map(function() {
  return $(this).attr('id');
}).get();

但是，我想将“btn”定义为多个 id，以便任何 id 都可以触发我的 JavaScript 的其余部分，但它似乎不适用于以下代码片段。

var btn = '#' + ids.join(', #');

从 Chrome 控制台来看，在我看来，它就像一根大绳子。

编辑:

其余代码 -

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var ids = $('.idSelect').map(function() {
  return $(this).attr('id');
}).get();

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
       modal.style.display = "none";
    }
}

Answer 1

您可以尝试使用 jQuery 映射 DOM 元素 .get()方法:

let btn = '#' + $('.idSelect').get().map(e => e.id).join(', #');

演示:

let btn = '#' + $('.idSelect').get().map(e => e.id).join(', #');
console.log(btn);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="idSelect" id="test1"></div>
<div class="idSelect" id="test2"></div>
<div class="idSelect" id="test3"></div>

<小时/>

或者您可以使用Array#reduce和 String#slice最后的 , 改为:

let btn = $('.idSelect').get().reduce((acc, curr) => acc += '#' + curr.id + ',', '').slice(0,-1);

演示:

let btn = $('.idSelect').get().reduce((acc, curr) => acc += '#' + curr.id + ',', '').slice(0,-1);
console.log(btn);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="idSelect" id="test1"></div>
<div class="idSelect" id="test2"></div>
<div class="idSelect" id="test3"></div>