我想用图片替换我的单选按钮,这是我的html,它将由系统生成,
<ul>
<li><input type="radio" name="id" value="68135112" title="Default / Default Title / Small" class="button-replace-size"/></li>
<li><input type="radio" name="id" value="70365102" title="Default / Default Title / Medium" class="button-replace-size"/></li>
<li><input type="radio" name="id" value="70365152" title="Default / Default Title / Large" class="button-replace-size"/></li>
<li><input type="radio" name="id" value="70365162" title="Default / Default Title / Extra Large" class="button-replace-size"/></li>
</ul>
我希望jquery脚本检查无线电输入中的标题文本是否包含某些关键字或字母,然后相应地替换该单选按钮。
例如,如果发现单选按钮包含关键字 - “小”,“小”,甚至是's',则将此按钮替换为此<a>
标记,该标记将在css中设置样式成像,
<a href="#" id="button-s" class="button-size hide-text" title="Click this to select size Small">S</a>
如果找到关键字“'中等”或“中等”,则情况相同......
这是我坚持的jquery,
if ($(':contains("Small")',$this_title).length > 0)
下面是我到目前为止出版的剧本......
this.replace_element_radio_size = function(){
/* radio button replacement - loop through each element */
$(".button-replace-size").each(function(){
if($(this).length > 0)
{
$(this).hide();
var $this = $(this);
var $this_title = $this.attr('title');
if ($(':contains("Small")',$this_title).length > 0)
{
$(this).after('<a href="#" id="button-s" class="button-size hide-text" title="Click this to select size Small">S</a>');
}
}
}
}
请给我一些想法......谢谢。
答案 0 :(得分:0)
你只需要这样做
$('input[title*="Small"]').replaceWith("<img src=sample.jpg>")
这将替换标题包含单词“Small”的所有输入元素与图像或更符合您的要求
$('input[title*="Small"]').replaceWith('<a href="#" id="button-s" class="button-size hide-text" title="Click this to select size Small">S</a>')
答案 1 :(得分:0)
以下是使用regular expressions匹配标题并选择类型的解决方案:
$(function(){
var replacement = $('<a href="#" class="button-size hide-text"></a>');
$('input:radio').each(function(){
var $this = $(this),
type = $this.attr('title').match(/Default Title \/ (.+)$/);
if (type.length > 1) {
var shortType = type[1].substring(0,1).toLowerCase();
$(this).replaceWith(
replacement.clone()
.attr('id', 'button-'+shortType)
.attr('title', 'Click here to select '+type[1])
.text(shortType)
);
}
});
});
您可以在jsFiddle上看到上述内容。