javascript - 用可点击的图像替换选择输入

Question

下面的代码允许我进行 HTML 选择并提供更加用户友好的图像可点击版本。单击图像时，它会在 DOM 中的隐藏选择字段中选择正确的值。

我只需要帮助调整下面的代码以处理页面上多次出现的选择。

如果它在页面上出现 10 次，我需要运行此代码 10 次。

我不确定如何分别针对每个目标

预览

HTML 选择变成可点击的图像，如下所示。 JavaScript 读取页面上已有的 HTML 选择并克隆它，并用图像替换每个值。然后它会隐藏原始选择字段。当单击图像并显示为选中状态时，它也在使用 JavaScript 在真正的隐藏选择器中选择该值!...

现场演示
http://jsfiddle.net/jasondavis/ov1a4apc/

JavaScript

jQuery(document).ready(function($) {

    if ($('#page_template').length) {
        //$('#page_template').hide().after('<div id="page_template_visual"></div>');
        $('#page_template').after('<div id="page_template_visual"></div>');

        $('#page_template option').each(function() {
            var classname = $(this).val().replace('.php', '');
            if ($(this).is("[selected]")) {
                classname = classname + ' selected';
            }
            $('#page_template_visual').append('<a href="' + $(this).val() + '" class="' + classname + '"><small></small>' + $(this).text() + '</a>');
        });

        if (!$('#page_template option[selected]').length) {
            $('#page_template_visual a:first-child').addClass('selected');
        }

        $('#page_template_visual a').on('click', function() {
            $('#page_template_visual a').removeClass('selected');
            theValue = $(this).addClass('selected').attr('href');
            $("#page_template").val(theValue).attr('selected', true);
            return false;
        });

    }

});

HTML 选择

<select name="page_template" id="page_template" selected="selected">
    <option value="default">Default Template</option>
    <option value="custom-archives.php">Archives Template</option>
    <option value="wpi/pdf_quote_bold.php">Bold</option>
    <option value="SOONcontact.php">Contact</option>
    <option value="page-invoice.php">Invoice</option>
    <option value="wpi/pdf_quote_modern.php">Modern</option>
    <option value="wpi/pdf_quote.php">Traditional</option>
</select>

CSS

#page_template{
    /* display: none; */
}

#page_template_visual {
        margin: 0 -10px;
}

#page_template_visual a {
        display: inline-block;
        width: 129px;
        height: 100px;
        margin: 0 5px 5px;
        text-align: center;
        color: #333333;
        font-weight: bold;
        text-decoration: none;
        background: url('http://i.imgur.com/7S9yzTY.png') no-repeat left top;
}

#page_template_visual a small {
        height: 64px;
        width: 119px;
        display: inline-block;
        margin: 5px 5px 5px 5px;
}

/* You can define images for the options here based on the classnames */
#page_template_visual a.template-both-sidebar-page {background-position: right -100px;}
#page_template_visual a.template-left-sidebar-page {background-position: right top;}
#page_template_visual a.template-right-sidebar-page {background-position: left -100px;}

#page_template_visual a.selected {
        color: #559a08;
        text-shadow: 1px 1px 0px #fff;  
}

#page_template_visual a.selected small {
        background: rgba(106,189,15,0.1) url('http://i.imgur.com/P0E1jmh.png') no-repeat center;
} 

Answer 1

首先，您需要将 page_template 和 page_template_visual id 更改为类(在 HTML、JavaScript 和 CSS 中)。

然后使用 page_template 类循环遍历所有元素，如下所示:

jQuery(document).ready(function($) {
    $('.page_template').each(function() {
        var $select = $(this);

        // Keep a reference to this element so you can use it below.
        var $visual = $('<div class="page_template_visual"></div>');

        $select.after($visual);

        $select.find('option').each(function() {
            var $option = $(this);
            var classname = $option.val().replace('.php', '');
            if ($option.is("[selected]")) {
                classname = classname + ' selected';
            }
            $visual.append('<a href="' + $option.val() + '" class="' + classname + '"><small></small>' + $option.text() + '</a>');
        });

        if (!$select.find('option[selected]').length) {
            $visual.find('a:first-child').addClass('selected');
        }

        // The next line could have been:
        //     $visual.find('a').on('click', function() {
        // But instead it uses event delegation, so only one
        // event handler is registered, instead of one for each <a>.
        $visual.on('click', 'a', function() {
            $visual.find('a').removeClass('selected');
            var value = $(this).addClass('selected').attr('href');
            $select.val(value);
            return false; // You don't need this, unless you really don't want the click event to bubble up.
        });
    });
});

jsfiddle