Простой скрипт отношений элементов на jQuery?

Question

[Джон Голт]

Всем привет. Помогите пожалуйста реализовать несложную штуку. Предположим у меня есть 2 элемента. И есть 2 контейнера с содержимым, которые открываются модальным окном в зависимости от того, на какой элемент я кликаю.
Реализовано это дело крайне калично - элементы вынесены в переменные, а потом функциями добавляют по клику класс:

var element_1 = $( '.block-1');
var container_1 = $( '.window-1');

var element_2 = $( '.block-2');
var container_2 = $( '.window-2');

    var openElement = function(event){
        element_1.click(function(){
            container_1.addClass('the-visible');
        });
        
        element_2.click(function(){
            container_2.addClass('the-visible');
        });
        return false;
    };

И так вопрос: как реализовать этот механизм по-человечески, чтобы была функция, которая брала аргументы элемента и контейнера и потом в зависимости от клика на элемент добавляла контейнеру класс? Надеюсь, адекватно объяснил. Просто если таких элемента 2, то не страшно, но если будет 100, то.. Всем спасибо заранее.

Answer 1

[Денис Инешин]

Все достаточно просто: jsfiddle.net/IonDen/rsdvw4wm

<button class='block' data-id='1'>Open win 1</button>
<button class='block' data-id='2'>Open win 2</button>

<div class='win' data-id='1'>Win 1</div>
<div class='win' data-id='2'>Win 2</div>

$(document).on('click', '.block', function () {
    var id = $(this).data('id'),
        $target = $('.win').filter('[data-id="' + id + '"]');
    
    $target.addClass('visible');
});

Comments

[Джон Голт]

А вообще в подобных решениях принято использовать атрибуты "data-id", элементов а не что-либо другое (классы, id), я правильно понял ?

[Денис Инешин]

Джон Голт: лучше всего data-атрибуты.