Question

我有一个带按钮的页面：

<input type="button" alue="TEST" 
style="height:40px;width:120px;"
 onClick="javascript:window.location='page.html';" />

我想将其转换为（webui）：

<li><a href="page.html">TEST</a></li>

这是我到目前为止的代码:(似乎不起作用）

  $('<input type="button" value=').replaceWith('<li>');
    $('onClick="javascript:window.location=').replaceWith('<a href="');
     $('';" />').replaceWith('" target="_self"></a></li>"');

Answer 1

你正在尝试在jQuery对象上进行字符串替换，这不是它的工作方式。你可以这样做：

$(':button[value="TEST"]').replaceWith($('<li><a href="page.html">TEST</a></li>'));

此外，正如Tomalak在评论中添加的那样，最好的办法是直接在HTML中更改它，而不是使用javascript。

Answer 2

或者以更一般的方式：

$("input[type='button']").replaceWith(function() {
   var $button = $(this);
   var $result = $("<a></a>");
   var target = $button.attr("onClick");
   target = target.substr(target.indexOf('\''));
   target = target.substr(0, target.length - 2);
   $result.attr("href", target);
   $result.text($button.val());
   $result = $("<li></li>").append($result);
   return $result;
});

实例：http://jsfiddle.net/ERLgR/1/

Answer 3

这似乎是个坏主意，但无论如何这里都是答案？

var elm = $('input[type="button"]'),
    alue = elm.attr('alue'),
    page = elm.attr('onClick').split("'")[1],
    elm2 = '<li><a href="'+page+'">'+alue+'</a></li>';
elm.replaceWith(elm2);

FIDDLE

JQuery - 用<li>替换html按钮，同时保持值不变</li>

3 个答案: