Показать/скрыть div на основе комбинации выбранных переключателей

Question

Итак, я работаю над веб-сайтом и не знаю, с чего начать jQuery.

Существует 2 формы, одна с двумя переключателями, а другая с 5 переключателями. Есть 10 различных комбинаций рубашек и штанов, которые можно показать, но только по одному в зависимости от комбинации переключателей, которые они выбрали.

Так что скажем, что рубашка 1 красная, а рубашка 2 - синяя. Брюки 1 красные, брюки 2 синие, брюки 3 зеленые и т. Д.

Таким образом, img11.jpg будет красная рубашка и красные штаны.

Img12.jpg будет красная рубашка и синие штаны.

img21.jpg - синяя рубашка и красные штаны.

Img23.jpg - синяя рубашка и зеленые штаны.

(Я включил диаграмму, чтобы показать это лучше)!

И так далее и так далее. У кого-нибудь есть хорошие ссылки или вы хотите помочь сделать это возможным?

Я не так много (если таковые имеются), опыт работы в JavaScript или JQuery, но вот мой HTML:

<form> 
    <input type="radio" id="shirt_Red" name="shirt" value="Red" /> 
    <input type="radio" id="shirt_Blue" name="shirt" value="Blue" /> 
</form 

<form> 
    <input type="radio" id="pants_Red" name="pants" value="Red" /> 
    <input type="radio" id="pants_Blue" name="pants" value="Blue" /> 
    <input type="radio" id="pants_Green" name="pants" value="Green" /> 
    <input type="radio" id="pants_Purple" name="pants" value="Purple" /> 
    <input type="radio" id="pants_Pink" name="pants" value="Pink" /> 
</form> 

Я даже не уверен, если я хотел бы использовать теги изображений или фона для div для этого, в зависимости от того, как это работает с jQuery или javascript. Спасибо!

Answer 1

Во-первых, вам нужно обрабатывать каждое событие изменения радио на вашей странице

$('input[type="radio"]').on("change",function(ev){ 
    ... 
}); 

Эта функция будет вызываться всякий раз, когда пользователь изменяет выбор радио.

Следующая вещь, которую вы должны рассмотреть вопрос о том, как получить, какие варианты выбраны, вы можете использовать «: проверено» внутри селектора JQuery

var $shirt = $('input[name="shirt"]:checked'); 
var $pants = $('input[name="pants"]:checked'); 

Поскольку файл изображения исчислил порядок, я хотел бы предложить вам поставить значение радио в тех числах вместо цветных строк, например:

<input type="radio" id="shirt_Red" name="shirt" value="1" /> 
<input type="radio" id="shirt_Blue" name="shirt" value="2" /> 

<input type="radio" id="pants_Red" name="pants" value="1" /> 
... 

Тогда в функции событий можно легко построить имя файла изображения с помощью using.val():

var image_path = 'img'+$shirt.val()+$pants.val()+'.jpg'; 

Наконец, установите файл изображения с помощью .attr()

$("#id-of-image-tag").attr("src",image_path); 

Вы можете увидеть комбинированный пример здесь http://jsfiddle.net/4bkngakw/
я сделать некоторые изменения, хотя, например, с помощью DIV для отображения объединенного файла, и я также устанавливают значение по умолчанию для рубашки и штанов, чтобы предотвратить неопределенную ошибку.

Answer 2

Вы можете создать функцию, которая отображает и фильтрует проверил радиокнопки и делает изображение, связанное с их index как:

function renderImg(selectors) { 
    var img = selectors.filter(function() { 
     return $(this).is(":checked") 
    }).map(function() { 
     return $(this).index() + 1 
    }).get(); 
    $("#result").html('<img src="images/image' + String(img[0]) + String(img[1]) + '.jpg" alt="" />') 
} 

Затем запустите функцию на странице загрузки и каждый раз, кнопки радиосистемы checked нравится:

jQuery(document).ready(function ($) { 
    var selectors = $("input[name=shirt], input[name=pants]"); 
    renderImg(selectors); 
    selectors.on("change", function (e) { 
     renderImg(selectors) 
    }) 
}); // ready 

Примечание первого радио кнопки каждой формы является checked