Question

我试图获取所有具有通用类名的id，并使用以下代码将它们存储为数组（此方法正确运行）：

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

但是，然后我想为多个id定义'btn'，以便任何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 .get()方法映射DOM元素：

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>

Answer 2

     @Bean
     public TokenEnhancer tokenEnhancer() {
        return new CustomTokenEnhancer();
     }

    @Override
    public void configure(AuthorizationServerEndpointsConfigurer endpoints) throws Exception {
        TokenEnhancerChain enhancerChain = new TokenEnhancerChain();

        enhancerChain.setTokenEnhancers(Arrays.asList(tokenEnhancer(), accessTokenConverter));
        endpoints.tokenStore(tokenStore)
                .accessTokenConverter(accessTokenConverter)
                .tokenEnhancer(enhancerChain)
                .authenticationManager(authenticationManager).tokenGranter(tokenGranter(endpoints));
    }

Answer 3

除非您使用$(yourSelectorHere)将btn变量包装在jQuery包装器中，否则btn变量将始终是一个长字符串。如果包装了该长字符串，它将为您提供所有所需元素的数组，并且JavaScript代码可以将其作为html元素进行访问。

var ids = [];

$('.idSelect').map(function() {
    ids.push($(this).attr('id'));
})

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

Answer 4

如果您希望能够使用ID的大选择符字符串-可以使用，即使这不是最好的主意-您也应该使用事件委托，如下所示：

const ids = [...document.querySelectorAll('.idSelect')].map(({ id }) => id);
const selectorString = '#' + ids.join(', #');
document.body.addEventListener('click', (e) => {
  if (e.target.closest(selectorString)) console.log('click');
});

<div class="idSelect" id="a">a (will trigger)</div>
<div class="idSelect" id="b">b (will trigger)</div>
<div class="idSelect" id="c">c (will trigger)</div>
<div id="d">d (won't trigger listener)</div>

JavaScript从数组存储ID

4 个答案: