Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.03.2018, 00:59
Интересующийся
Отправить личное сообщение для Dan_net Посмотреть профиль Найти все сообщения от Dan_net
 
Регистрация: 04.03.2018
Сообщений: 10

Переключение трех и более цветов при клике на кнопку jQuery
Необходимо, что бы при клике на кнопки происходило переключение цветов.
Ответить с цитированием
  #2 (permalink)  
Старый 04.03.2018, 01:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Dan_net,
ваши попытки где?
Ответить с цитированием
  #3 (permalink)  
Старый 04.03.2018, 08:16
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

цвет какого элемента хотябы.
Ответить с цитированием
  #4 (permalink)  
Старый 04.03.2018, 12:12
Интересующийся
Отправить личное сообщение для Dan_net Посмотреть профиль Найти все сообщения от Dan_net
 
Регистрация: 04.03.2018
Сообщений: 10

<div id="changeColor">
<input type="button" id="red" value="Red">
<input type="button" id="blue" value="Blue">
<input type="button" id="green" value="Green">
</div>

<figure id="imapc">
<object data="test_1.svg" type="image/svg+xml" id="imap">
</object>
<figcaption>SVG-рисунок</figcaption>
</figure>


$(window).on('load', function () {
var svgobject = document.getElementById('imap');
if ('contentDocument' in svgobject)
var svgdom = svgobject.contentDocument;

$('#changeColor input[type=button]').click(function (e) {
var row = $(this).parent();
var className = row.attr("id");
var idClicked = e.target.id;
$("."+className, svgdom).myAddClass(idClicked);
});

});
Ответить с цитированием
  #5 (permalink)  
Старый 04.03.2018, 13:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от Dan_net
myAddClass
что это? и есть ли в svg класс changeColor?
Ответить с цитированием
  #6 (permalink)  
Старый 04.03.2018, 13:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

svg переключение цвета
Dan_net,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .changeColor.red{fill:none;stroke:#FF0000;stroke-width:5;stroke-miterlimit:10;}
  .changeColor.blue{fill:none;stroke:#0000FF;stroke-width:5;stroke-miterlimit:10;}
  .changeColor.green{fill:none;stroke:#008000;stroke-width:5;stroke-miterlimit:10;}
  .changeColor {fill:none;stroke:#FFFF00;stroke-width:5;stroke-miterlimit:10;}
  .st1 {fill:none;stroke:#ccccc;stroke-width:5;stroke-miterlimit:10;}
</style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(window).on('load', function () {
var svgobject = document.getElementById('imap');
$('#changeColor input[type=button]').click(function (e) {
var row = $(this).parent();
var className = row.attr("id");
var idClicked = e.target.id;
$("."+className, svgobject).removeClass("red blue green").addClass(idClicked);
});

});

  </script>
</head>

<body>
<div id="changeColor">
<input type="button" id="red" value="Red">
<input type="button" id="blue" value="Blue">
<input type="button" id="green" value="Green">
</div>

<svg id="imap" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 500 500" xml:space="preserve"><metadata><x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c067 79.157747, 2015/03/30-23:40:42        "><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><rdf:Description rdf:about=""/></rdf:RDF></x:xmpmeta></metadata>

<polyline class="changeColor " points="132 47.5 365 47.5 481.5 249 365.1 450.5 132 450.5 15.7 249 107.9 89.5 338 89.5 429.4 248 338.1 406.5 155 406.5 64.2 248 133.6 127.5 319 127.5 388.2 249 318.5 370.5 179 370.5 109.3 249 160.1 160.5 300 160.5 350.8 249 299.8 337.5 198 337.5 146.8 249 181.5 188.7 282 188.1 "/>
<polyline class="st1 path" points="132 47.5 365 47.5 481.5 249 365.1 450.5 132 450.5 15.7 249 107.9 89.5 338 89.5 429.4 248 338.1 406.5 155 406.5 64.2 248 133.6 127.5 319 127.5 388.2 249 318.5 370.5 179 370.5 109.3 249 160.1 160.5 300 160.5 350.8 249 299.8 337.5 198 337.5 146.8 249 181.5 188.7 282 188.1 "/></svg>

</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 04.03.2018, 13:35
Интересующийся
Отправить личное сообщение для Dan_net Посмотреть профиль Найти все сообщения от Dan_net
 
Регистрация: 04.03.2018
Сообщений: 10

это по поводу myAddClass
jQuery.fn.myAddClass = function (classTitle) {
    return this.each(function() {
        var oldClass = jQuery(this).attr("class");
        oldClass = oldClass ? oldClass : '';
        jQuery(this).attr("class", (oldClass+" "+classTitle).trim());
    });
};


да, в svg есть класс changeColor
Ответить с цитированием
  #8 (permalink)  
Старый 04.03.2018, 13:36
Интересующийся
Отправить личное сообщение для Dan_net Посмотреть профиль Найти все сообщения от Dan_net
 
Регистрация: 04.03.2018
Сообщений: 10

Спасибо! А если будет большая палитра цветов?
Ответить с цитированием
  #9 (permalink)  
Старый 04.03.2018, 13:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от Dan_net
А если будет большая палитра цветов?
и ?
Ответить с цитированием
  #10 (permalink)  
Старый 04.03.2018, 13:53
Интересующийся
Отправить личное сообщение для Dan_net Посмотреть профиль Найти все сообщения от Dan_net
 
Регистрация: 04.03.2018
Сообщений: 10

$("."+className, svgobject).removeClass("red blue green").addClass(idClicked);


здесь ведь надо будет указывать все необходимые мне цвета (допустим их 20+), может есть проще вариант?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
всплывающий блок при клике на input ChikiBOBONI (X)HTML/CSS 1 31.10.2016 11:40
Добавить/удалить класс при клике. Skrowaks Общие вопросы Javascript 5 02.08.2016 05:08
При клике на кнопку чтобы курсор не исчезал qwermjk Общие вопросы Javascript 3 28.07.2014 13:01
Закрыть элемент при клике вне его masterm Общие вопросы Javascript 3 31.07.2009 11:27