Question

我试图创建一个包含列表元素的列表，这些列表元素可以刷新，显示类似于ios应用程序中的滑动删除效果的删除按钮。我遇到了这个完美的例子here。它使用hammer.js库，css和html。此演示中有两个列表项，第一个可以向左拖动或滑动，显示删除按钮。第二个li元素无论共享相同的类，都不能向左拖动。我尝试过更改代码但似乎无法弄清楚为什么滑动效果仅应用于第一个li元素而不是第二个元素。最后，我希望将此效果应用于列表中的所有li元素。我可能错过了一些小事，但我还没弄清楚到底是什么。如果有人能让我知道，我将不胜感激。

代码：

 <div class="wrapper">
 <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>
   </ul>
   <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>
  </ul>
 </div>


<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

我认为您的问题在于选择器。

// grab ONE .message element
 message = document.querySelector('.message')

// grab ALL .message elements
 message = document.querySelectorAll('.message')

Answer 2

您需要使用querySelectotAll而不是querySelector。同时注意到你有两个列表而不是一个。你需要只有一条消息ul并且在ul中都有消息li。

代码

   <div class="wrapper">
 null   <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>
    </div>

为什么此脚本仅适用于此列表中的一个列表项？

2 个答案: