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

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

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

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

不过，我不知道如何分别针对每一个目标

预览

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;
        });

    }

});

<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>

#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;
} 

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

现场演示

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;
        });

    }

});

<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>

#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;
} 

---

首先，您需要将

page\u模板

和

page\u模板

id更改为类（在HTML、JavaScript和CSS中）

然后使用

page\u模板

类循环遍历所有元素，如下所示：

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.
        });
    });
});

jQuery（文档）.ready（函数（$）{
$（'.page_template'）。每个（函数（）{
变量$select=$（此变量）；
//保留对此元素的引用，以便在下面使用它。
变量$visual=$（''）；
$select.after（$visual）；
$select.find（'option'）。每个（函数（）{
var$选项=$（此选项）；
var classname=$option.val（）.replace（'.php'，''）；
如果（$option.is（“[selected]”）{
classname=classname+“选定”；
}
$visual.append（“”）；
});
if（！$select.find（'option[selected]'）.length）{
$visual.find（'a:first child'）.addClass（'selected'）；
}
//下一行可能是：
//$visual.find（'a'）。在（'click'，function（）上{
//但是它使用事件委托，所以只有一个
//事件处理程序已注册，而不是每个都注册一个
非常感谢。我自己的尝试失败，因为我的单击事件针对的是所有这些事件！这太完美了