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

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 IDS以类（在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