Question

我刚刚开始学习如何使用jQuery，javascript等进行编码，我想询问是否可以将某些<ul>和<li>更改为{{1} }和<div>。

我听说插件经常被使用并且是jquery最大的优点之一，所以我想我会尝试自己构建一个。不幸的是，我对编程很陌生，所以我不知道所有重要的东西。

目前，我的插件会将<p>变为<div>，我的目标是更改菜单，而不是可移动的框。目前，脚本会更改所有内容，只要可移动的div变为ul，按钮就会消失。

我的HTML文件有一个菜单和一个可移动的框，里面有2个按钮。

<ul>

我使用以下脚本来调整插件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>List</title>
        <script type="text/javascript"
                src="jquery-1.10.2.js"> 
        </script>
        <script type="text/javascript"    
                src="plugins/jquery.replaceelements-1.0.js">
        </script>
        <script type="text/javascript"  
                src="useplugin.js">
        </script>

        <style type="text/css">
            .green {
                color: green;
            }
            #menu {
                font-family: Arial;
            }
            #move, #base {
                padding: 5px;
                text-align: center;
                font-family: Arial;
                background-color: #99CCFF;
                border: solid 1px #c3c3c3;
            }

            #move {
                padding: 50px;
                display: none;
            }
        </style>
    </head>
    <body>

        <ul id="menu">
            <li>Text 1</li>
            <li>Text 2</li>
            <li>Text 3</li>
            <li>Text 4</li>
            <li>Text 5</li>
            <li>Text 6</li>
        </ul>

        <div id="base">
            Click to Expand
        </div>
        <div id="move">
            <button id="format">Click to change format</button>
            <button id="color">Click to change color</button>
        </div>

    </body>
</html>

这是插件。

$(document).ready(function(){
    $("#format").click(function() {
        if ($("#menu").attr("class") == "changed") {
            $("#menu")
            .replaceReverse();
        }

        else {
            $("#menu")
            .replaceElements();

        }
    });
    $("#color").click(function() {
        $("#menu")
            .changeColor();
    });
    $("#base").click(function() {
        $("#move")
            .slideButton();
    });

});

如果你们其中一个人帮我解决这个（新手）问题，我会非常感激，并为我糟糕的英语道歉。

Answer 1

那是因为你不需要$(this).parent()给你body元素，因为this是你案例中的#menu项，而父元素将是{{} 1}}（你不想要的，因为你只想切换菜单的内部元素）。

当您第一次点击时，没有任何不妥之处，因为您的body元素已经是#move。但是当您第二次点击它时，它会将div切换到div元素内的ul。

解决方案将是：

将body更改为$(this).parent()，但在这种情况下，您还需要处理$(this)本身的情况，因为#menu赢了t返回$(obj).find本身
或保持原样，但将obj更改为类似的内容 $(obj).find，其中$(obj).find('#' + id + ', #' + id + ' ' + i ) =您的目标元素ID（因此您必须引入其他参数：id

更改某些<ul>和<li>（jQuery）</li> </ul>

1 个答案: