根据用户操作向页面添加控件（处理重复 ID）

Question

我想像小部件一样多次添加局部视图。 ID 重复，事件未正确触发。处理问题的最佳方法是什么？它会是一个数据模板吗？

感谢您的帮助。

以下是部分视图中的代码，我想根据具有不同 images/data 的用户操作添加多个代码。

    <div class="demo-section wide">
        <div id="placeholder">
            <img id="home0" src="../content/web/fx/replace/home1.jpg" />
            <img id="home1" style="display: none" src="../content/web/fx/replace/home2.jpg" />
            <img id="home2" style="display: none" src="../content/web/fx/replace/home3.jpg" />
        </div>
        <ul id="homes">
            <li><a id="thumb1" data-index="0" href="#"><span>Home 1</span></a></li>
            <li><a id="thumb2" data-index="1" href="#"><span>Home 2</span></a></li>
            <li><a id="thumb3" data-index="2" href="#"><span>Home 3</span></a></li>
        </ul>
    </div>

    <script type="text/javascript" charset="utf-8">
        $(function() {
            var index = 0,
                currentEffect;

            $("#homes a").click(function(e) {
                e.preventDefault();
                var target = parseInt($(this).data("index"));
                if (target === index) {
                    return;
                }

                if (currentEffect) {
                    currentEffect.stop();
                }
                $("#home" + target).show();
                currentEffect = kendo.fx("#home" + target).replace("#home" + index, "swap");
                currentEffect.run();
                index = target;
            });
        });

    </script>
    <style>
        #placeholder {
            display: inline-block;
            width: 500px;
            height: 333px;
            position: relative;
        }
        #placeholder img {
            position: absolute;
        }

        #homes {
            display: inline-block;
            width: 160px;
            height: 333px;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #homes li {
            margin: 0;
            padding: 0;
        }
        #homes li a {
            display: block;
            width: 160px;
            height: 109px;
            margin: 3px 0;
            box-shadow: inset 0 0 10px rgba(0,0,0,.5);
        }
        #homes li a:hover {
            box-shadow: inset 0 100px 100px rgba(0,0,0,.3);
        }
        #homes li a#thumb1 {
            margin: 0 0 3px;
        }
        #homes li a span {
            display: none;
        }

        #thumb1 {
            background: url('../content/web/fx/replace/t1.jpg') no-repeat left top;
        }
        #thumb2 {
            background: url('../content/web/fx/replace/t2.jpg') no-repeat left top;
        }
        #thumb3 {
            background: url('../content/web/fx/replace/t3.jpg') no-repeat left top;
        }

        /**
         * Custom swap effect
         */

        /* the initial position of the next div */
        .k-fx-swap.k-fx-start .k-fx-next {
            -webkit-transform: translatex(100%);
            -moz-transform: translatex(100%);
            -ms-transform: translatex(100%);
            transform: translatex(100%);
        }

        /* the initial position of the next div */
        .k-fx-swap.k-fx-end .k-fx-current {
            opacity: 0;
            -webkit-transform: scale(0.9);
            -moz-transform: scale(0.9);
            transform: scale(0.9);
        }


        /* Reverse animation */

        /* the initial position of the next div */
        .k-fx-swap.k-fx-reverse.k-fx-start .k-fx-next {
            opacity: 0;
            -webkit-transform: scale(0.9);
            -moz-transform: scale(0.9);
            transform: scale(0.9);
        }

        /* the initial position of the next div */
        .k-fx-swap.k-fx-reverse.k-fx-end .k-fx-current {
            opacity: 1;
            -webkit-transform: translatex(100%);
            -moz-transform: translatex(100%);
            transform: translatex(100%);
        }

    </style>

Answer 1

我能够添加 id 关闭模型，如下所示 $("#@Model.Id-img a").on('click', 函数(e) {

这是增加标签 ID 的巧妙功能。

根据用户操作向页面添加控件（处理重复 ID）

Add controls to a page based on user action (handle duplicate id)

javascript

datatemplate