我刚刚开始学习如何使用 jQuery、javascript 等进行编码，我想问一下是否可以只更改一些特定的<ul>and<li>到<div>and <p>。
我听说插件真的很常用，也是 jquery 的最大优势之一，所以我想我会尝试自己构建一个。不幸的是，我对编程真的很陌生，所以我不知道所有重要的东西。
目前我的插件把everyone<div>变成了一个<ul>，我的目标是改变菜单而不是可移动的盒子。目前脚本改变了一切，一旦可移动的 div 变成 ul，按钮就会消失。
我的 HTML 文件有一个菜单和一个可移动的框，里面有 2 个按钮。
<!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();
});
});
这就是插件。
;(function($) {
jQuery.fn.replaceElements = function(arg, callback) {
var options = $.extend({},
$.fn.replaceElements.defaults,
arg,
{callback:callback});
return this.each(function() {
replace(options,$(this).parent());
});
};
function replace(opts, obj) {
for (var i in opts) {
$(obj).find(i).each(function() {
var thisElement = $(this);
thisElement.wrapInner("<" + opts[i] + " />");
thisElement.children().addClass("changed");
if(thisElement.attr("id")) {
thisElement.children()
.attr("id",thisElement.attr("id"));
}
thisElement.children().unwrap();
});
}
callFn(opts.callback);
};
function callFn (callback) {
if ($.isFunction(callback)) {
callback.call(this);
}
};
$.fn.replaceElements.defaults = {
ul: 'div',
li: 'p'
}
})(jQuery);
;(function($) {
jQuery.fn.replaceReverse = function(arg, callback) {
var options = $.extend({},
$.fn.replaceReverse.defaults,
arg,
{callback:callback});
return this.each(function() {
replaceRev(options,$(this).parent());
});
};
function replaceRev(opts, obj) {
for (var i in opts) {
$(obj).find(i).each(function() {
var thisElement = $(this);
console.log(opts[i]);
thisElement.wrapInner("<" + opts[i] + " />");
if(thisElement.attr("id")) {
thisElement.children()
.attr("id",thisElement.attr("id"));
}
thisElement.children().unwrap();
});
}
callFn(opts.callback);
};
function callFn (callback) {
if ($.isFunction(callback)) {
callback.call(this);
}
};
$.fn.replaceReverse.defaults = {
div: 'ul',
p: 'li'
}
})(jQuery);
如果你们中的一个人帮助我解决这个（新手）问题，我将非常感激，我为我糟糕的英语道歉。