Переключатель кнопки SVG
Я пытаюсь переключить кнопку SVG из одного состояния в другое. Это два отдельных SVG, содержащихся в более крупном SVG.
Для справки я приложил эти изображения здесь:
До сих пор я придумал это, когда при щелчке я меняю значение идентификатора с отображения или выключения, как показано ниже. Я уверен, что есть более чистый способ сделать это с помощью jQuery?
HTML Код SVG был слишком длинным, поэтому я добавил его в pastebin.
JS-код
$( "#off-btn-nav-01-category" ).on( "click", function() {
$("#off-btn-nav-01-category").css("display", "none");
$("#on-btn-nav-01-category").css("display", "block");
});
$( "#on-btn-nav-01-category" ).on( "click", function() {
$("#on-btn-nav-01-category").css("display", "none");
$("#off-btn-nav-01-category").css("display", "block");
});
Ваш код упрощенный должен быть здесь, а не на другом сайте. Это не настолько сложная проблема, чтобы вы не могли поместить демонстрационный фрагмент в свой пост.
Вероятно, вы можете издеваться над структурой с помощью простых элементов div. Все, что действительно имеет значение, — это их позиционные отношения.
Предполагается ли, что код jQuery, который вы сейчас показали, обрабатывает только одну кнопку один? Вы должны использовать обработчик кликов один для всех кнопок «вкл» и один для всех кнопок «выкл». Внутри обратного вызова вы можете использовать $(this), чтобы получить ссылку на нажатую кнопку, а с помощью некоторых методов обхода DOM вы можете перейти к некоторому общему элементу-предку, чтобы затем найти там «аналог» кнопки.
img, object или чего-то подобного для встраивания SVG защищает его от любых внешних манипуляций.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Если вы используете встроенный svg, как вы говорите, вы можете просто переключить идентификатор, указанный в svg.
$(".Icon use").on("click", function() {
if ($(this).attr("href") === "#Icon-On") {
$(this).attr("href", "#Icon-Off");
} else {
$(this).attr("href", "#Icon-On");
}
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style = "height: 0; width: 0; position: absolute; visibility: hidden;">
<svg version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink">
<symbol id = "Icon-On" viewBox = "0 0 1024 1024">
<path class = "Path1" d = "M512 32l-480 480h288v512h384v-512h288z" />
</symbol>
<symbol id = "Icon-Off" viewBox = "0 0 1024 1024">
<path class = "Path1" d = "M864 128l-480 480-224-224-160 160 384 384 640-640z" />
</symbol>
</svg>
</div>
<svg class = "Icon"><use href = "#Icon-Off" /></svg>
<svg class = "Icon"><use href = "#Icon-Off" /></svg>Вы можете использовать оператор startwith для селектора jQuery, получить номер и тип из идентификатора и применить его в своих дальнейших селекторах:
$('[id^ = "off-btn-nav"], [id^ = "on-btn-nav"]').click(function() {
let idParts = this.id.split("-");
let number = idParts[idParts.length - 2];
if (idParts[0] === "on") {
$(`#on-btn-nav-${number}-${idParts[idParts.length - 1]}`).hide();
$(`#off-btn-nav-${number}-${idParts[idParts.length - 1]}`).show();
} else {
$(`#on-btn-nav-${number}-${idParts[idParts.length - 1]}`).show();
$(`#off-btn-nav-${number}-${idParts[idParts.length - 1]}`).hide();
}
});
Извините, что не создал фрагмент, stackoverflow.com сказал, что это будет слишком долго.
JSFiddle: https://jsfiddle.net/tygkjLvf/
Мне очень нравится этот подход, единственное, чего не хватает, — это способ различать, какая кнопка нажата, и предупреждать. например если нажата «01-категория», отображается предупреждение, и то же самое касается других, например. 02-цена или 03-время
@Mit тип может быть достигнут через idParts[idParts.length - 1].
Хорошо, я попробовал это, я все еще на ранней стадии изучения JS. Я пробовал этот подход, который не сработал idParts[5] === "mor")
@ Не волнуйтесь, я был на вашем месте в какой-то момент, и я знаю, каково быть новичком, поэтому я прекрасно понимаю трудности, с которыми вы сталкиваетесь, и я рад помочь, когда/если смогу.
См. Как спросить, а затем измените, чтобы показать более подробную информацию. Очень сложно отлаживать без HTML. Ваш заголовок должен быть четким, конкретным вопросом.