javascript - 是什么阻止 querySelectorAll 在此代码中处理具有相同类的所有元素？

Question

我正在尝试为列表中的 li 元素生成滑动删除效果，类似于您在删除短信时在 ios 中看到的效果。我这里有一个codepen这正是我要找的东西。正如您在此示例中所见，可以将第一个 li 元素拖到左侧以显示删除按钮。问题是，我一直在尝试将此效果应用于列表中的所有 li 元素，而不仅仅是第一个元素。正如您将在本示例中看到的，第二个 li 元素无论与第一个 li 元素共享相同的类，都无法被拖动到左侧。它只是行不通。我被告知一个解决方案是将 querySelectorAll 而不是 querySelector 放在我的 js 中，以便对共享相同类的所有 li 元素产生相同的效果，但是这也没有用。我上面有一个链接的代码笔演示使用 querySelector 所以你会看到第一个 li 元素具有我想要应用于所有 li 元素的效果。因此，您可以将它拖动到左侧并查看它是否正常工作，但请注意，如果您将 querySelector 更改为 querySelectorAll，则没有任何效果。有任何想法吗？谢谢。

<ul class="messages">
<li>
    <div class="message">
        <h3>Lorem ipsum</h3>
        <p>Lorem ipsum dolor sit amet</p>
        <time datetime="2014-08-22">Friday</time>
    </div>
    <button class="button-delete">Delete</button>
</li>
<li>
    <div class="message">
        <h3>Lorem ipsum</h3>
        <p>Lorem ipsum dolor sit amet</p>
        <time datetime="2014-08-22">Friday</time>
    </div>
    <button class="button-delete">Delete</button>
</li>
 </ul>


<style>
body {
padding:0;
margin:0;
font-family:'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
}



.messages {
overflow:hidden;
width:100%;
padding:0;
}

.messages li {
position:relative;
list-style-type:none;
min-height:75px;
}

.messages li:after {
content:'';
position:absolute;
z-index:2;
right:0;
bottom:0;
left:28px;
height:1px;
background-color:#e6e6e8;
}

.message {
position:relative;
z-index:2;
display:block;
padding:8px 28px 28px 28px;
background-color:#fff;
text-decoration:none;
cursor:pointer;
}

.message:after {
content:'';
position:absolute;
top:12px;
right:14px;
width:9px;
height:13px;

}

.message * {
-moz-user-select:none;
}

.message h3 {
margin:0 0 3px 0;
color:#000;
font-size:16px;
letter-spacing:.15px;
}

.message p {
margin:0;
font-size:14px;
color:#8e8e93;
letter-spacing:.8px;

}

.message time {
position:absolute;
top:10px;
right:31px;
font-size:14px;
color:#8e8e93;
letter-spacing:.8px;
}

.button-delete {
position:absolute;
top:0;
right:0;
bottom:0;
width:82px;
margin:0;
border:none;
background-color:#ff3b30;
color:#fff;
font-family:'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
font-size:18px;
letter-spacing:.4px;
} 
</style>


<script>
var transformStyle = prefix() + 'Transform',
transitionStyle = prefix() + 'Transition',
message = document.querySelector('.message'),
buttonDelete = document.querySelector('.button-delete'),
hammer = new Hammer(message, {dragLockToAxis: true, dragBlockHorizontal: true}),
min = -(buttonDelete.offsetWidth), max = 0,
moveX = 0, startX = 0, added = 0, speed, friction = 0;

hammer.on('panstart', function() {
message.style[transitionStyle] = 'none';
});

hammer.on('panleft panright', function(e) {

moveX = startX + e.deltaX;

if (moveX < min) {
    friction = startX > min ? min/1.5 : startX;
    moveX = friction + (e.deltaX/3);
}

if (moveX <= max) {
    message.style[transformStyle] = 'translateX(' + moveX + 'px)';
}

});

hammer.on('panend', function(e) {

speed = .2 / (Math.abs(e.velocityX) + 1);

added += e.deltaX;

if (added < min/2) {
    startX = min;
}
else if (added > Math.abs(min/2)) {
    startX = max;
}

message.style[transitionStyle] = 'all ' + speed + 's ease-in-out';
message.style[transformStyle] = 'translateX(' + startX + 'px)';

added = 0;

});

function prefix() {

var styles = window.getComputedStyle(document.documentElement, ''),
    pre = (Array.prototype.slice
        .call(styles)
        .join('')
        .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
    )[1];

return pre[0].toUpperCase() + pre.substr(1);

}
</script>

Answer 1

似乎 hammer.js 仅适用于一个元素。

https://github.com/hammerjs/hammer.js/blob/master/hammer.js#L369

您必须使用 querySelectorAll() 然后在元素上循环，在每个元素上应用新的 Hammer。

messages = document.querySelectorAll('.message');

[].forEach.call(messages, function(message) {

http://codepen.io/anon/pen/RNQOrO