jquery: замена радиокнопок и подбор ключевых слов - PullRequest
Новая
       4

jquery: замена радиокнопок и подбор ключевых слов

0 голосов
/ 14 января 2011

Я хочу заменить свои радиокнопки на изображения, вот мой 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>

, и это будет тот же самый случай, если будет найдено ключевое слово - "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>');


            }
        }
    }
}

пожалуйста, дайте мне несколько идей, как это сделать ... спасибо.

Ответы [ 2 ]

0 голосов
/ 14 января 2011

Вот решение с использованием регулярных выражений для соответствия названию и выбора типа: 

$(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 .

0 голосов
/ 14 января 2011

Вам просто нужно сделать это 

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