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

我正试图为列表中的li元素产生一种滑动删除效果，类似于您在ios中删除文本消息时看到的效果。我在这里有一个代码笔，它准确地展示了我正在寻找的东西。正如您在本例中看到的，第一个li元素可以向左拖动，显示一个删除按钮。问题是，我一直试图将这种效果应用于列表中的所有li元素，而不仅仅是第一个。正如您将在本例中看到的那样，第二个li元素，无论与第一个li元素共享相同的类，都无法向左拖动。它就是不起作用。有人告诉我，一个解决方案是在js中放置querySelectorAll而不是querySelector，以便对共享相同类的所有li元素都具有相同的效果，但这也不起作用。我有一个链接到上面的codepen演示使用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>