Question

如何在一个页面上关闭YUI div元素（模块）的多个实例。以下代码适用于一个实例：

＆＃13;

YUI({filter: 'raw'}).use('node','anim', function(Y) {
			var anim = new Y.Anim({
				node: '#panel1',
				to: { opacity: 0 }
			});

			var onEnd = function() {
				var node = this.get('node');
				node.get('parentNode').removeChild(node);
			};

			anim.on('end', onEnd);

			Y.one('#panel1 .yui3-remove').on('click', anim.run, anim);


		});

＆＃13;

<div id="panel1" class="yui3-module">
	<div class="yui3-hd"><h3>Learners Progress</h3>  <a title="fade then remove element" class="yui3-remove"><em>x</em></a></div>
	<div class="yui3-bd" style="border:0px solid black" id="learnerStatus"></div>

</div>

＆＃13;

如何修改此代码以使用多个div，因为此代码使用div的id。所以，我必须为每个div复制这个。还有其他办法吗？

Answer 1

有许多不同的方法来实现您的目标，其中之一就是其中之一：http://jsfiddle.net/2rw84usL/

HTML：

<div class="items">
    <div class="item">
        <h3>Learners Progress</h3>
        <span class="remove">Close</span>
    </div>
    <div class="item">
        <h3>Learners Progress</h3>
        <span class="remove">Close</span>
    </div>
</div>

SCRIPT：

YUI().use('node','anim', function(Y) {
    var anim = new Y.Anim({
        to: { opacity: 0 },
        duration: 0.5,
        on : {
            end : function() {
                var node = this.get('node');
                node.get('parentNode').removeChild(node);
            }
        }
    });

    Y.one('.items').delegate('click', function(e) {
        anim.set('node', e.target.get('parentNode')).run();
    }, '.remove');
});

请注意：我在这里使用事件委托，因为这是更有效的方式来聆听＆＃34;来自许多类似元素的事件（例如关闭按钮）。

在此处详细了解活动授权：http://yuilibrary.com/yui/docs/event/#delegation

如何淡出和关闭YUI div元素

1 个答案: