jquery：单选按钮替换和关键字匹配

Question

我想用图像替换我的单选按钮，这是系统生成的 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 脚本检查单选输入中的标题文本是否包含某些关键字或字母，然后相应地替换该单选按钮。

例如，如果发现单选按钮包含关键字“Small”或“small”，甚至“s”，则将此按钮替换为此 标记，该标记将是在 css 中将样式设置为图像，

<a href="#" id="button-s" class="button-size hide-text" title="Click this to select size Small">S</a>

如果找到关键字“Medium”或“medium”，情况将是相同的...

这是我陷入困境的 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>');


            }
        }
    }
}

请给我一些想法来实现...谢谢。

Answer 1

这是一个使用 正则表达式 来匹配标题并选择类型的解决方案

$(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 上查看上述内容。

Answer 2

您只需要执行此操作

$('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>')