#jquery
#jquery
Вопрос:
Я создаю своего рода доску заданий, и есть два режима, которые запускаются с одной страницы НЕ одновременно. Я создал эти функции для запуска модалов. Не могли бы вы подсказать мне, как написать это кратчайшим путем (если это возможно). Спасибо. итак, это основная часть моего html-кода:
<div class="col-md-9">
<a id="test" href="#destination">FIRST modal</a>
<!-- Modal -->
<div id="destination"></div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">amp;times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<h3>First Modal</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div> <!-- END First -->
<a id="test2" href="#destination2">SECOND modal</a>
<!-- Modal -->
<div id="destination2"></div>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">amp;times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<h3>Second Modal</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div> <!-- END Second -->
и Jquery я хотел бы «сократить»
jQuery(function (){
$('#test').click(function(){
$('#myModal').modal('show');
});
$('#test2').click(function(){
$('#myModal2').modal('show');
});
});
Комментарии:
1. Предоставление разметки HTML наверняка помогло бы… Теперь, я думаю, вы могли бы просто использовать классы и индексы для таргетинга на определенный один модальный
2. Что не так с текущей?
3. проблема в том, что у меня будет 20 или более модалов для запуска, и я думаю, смогу ли я сделать это короче.
4. @HubertKubasiewicz если вы можете изменить разметку HTML, вы можете добавить атрибут data-modalId, а затем создать общую функцию jQuery
Ответ №1:
Вы можете использовать принцип DRY для приведения в порядок своего кода. Сначала используйте общий класс для элемента, который запускает модальный, вместе с data-* атрибутом для хранения уникальной связи для этого элемента.
<button type="button" class="test" data-target="#myModal">Open modal</button>
<button type="button" class="test" data-target="#myModal2">Open modal #2</button>
Затем вы можете прочитать этот data атрибут в своем обработчике щелчков, чтобы вызвать modal() правильный элемент:
jQuery(function (){
$('.test').click(function(){
var target = $(this).data('target');
$(target).modal('show');
});
});
Комментарии:
1. Проблема в том, что я не хочу иметь кнопку, я хочу, чтобы люди могли нажимать на название должности, и в этот момент запускался модальный режим. До сих пор я достиг этого эффекта, но я хотел бы, чтобы файл js был как можно короче. Может быть, это не очень хорошая идея, и все должно быть так, как я написал.
2. Это
buttonвсего лишь пример. Этот метод может быть применен к любому HTML, который вы хотите использовать. Если вы отредактируете свой вопрос, чтобы включить свой текущий HTML, я могу привести вам более полный пример3. хорошо, теперь я изменил свои ссылки на кнопки, как вы предлагаете, и это работает, так что теперь мне нужно преобразовать кнопки в текст, и все должно быть в порядке.
4. <a id=»test» href=»#destination» data-target=»#myModal»>ПЕРВЫЙ модальный</a>
5. Хорошо, теперь он работает, мне не хватало данных-toggle =»modal»
Ответ №2:
Если в вашем HTML, ваши элементы #test и #test2 имеют data-id атрибут, например, вы можете сделать :
jQuery(function (){
$('#test, #test2').click(function(){
var id = $(this).attr('data-id');
$('#myModal' id).modal('show');
});
});
Если data-id атрибут элемента равен 2, эта функция открывает модальный #myModal2
Комментарии:
1. Итак, у меня есть в первом модальном id = test и id = myModal, а во втором модальном id = test2 и id = myModal2. И если я скопирую ваше предложение на 100%, ничего не будет работать, но если я удалю » id», оно будет работать, но при нажатии на первый или второй вариант срабатывает только первый модальный.
2. Отредактируйте свой пост и, пожалуйста, передайте свой HTML.