Scala.js: выбор и манипулирующий сгенерированный SVG -- jquery поле с участием scala поле с участием dom поле с участием svg поле с участием scala.js пол Связанный проблема

Scala.js: Selecting and manipulating generated SVG


2
vote

проблема

русский

Я борюсь с чем-то, казалось бы, простым.

Использование SCAJA.JS, я создал несколько SVG с библиотекой STALATAGS.

Теперь я хочу манипулировать элементами SVG с использованием событий:

 <код> circ.onclick = { e: dom.MouseEvent => ... }   

В частности, я хочу выбрать все элементы определенного класса, а затем переключать некоторые атрибуты класса на них.

Я попробовал привязку Scala.js jQuery. Хотя я могу извлечь с ним выбора, я не могу манипулировать выбранными элементами (установленные классы и т. Д.). Это, кажется, является фундаментальной проблемой SVG, являющейся различным видом DOM, который не может быть манипулирован jQuery.

Далее я попробовал низкий уровень DOM API. Это дает мне выбор:

 <код> document.body.getElementsByClassName("myClass").foreach { node =>  ... }   

Теперь я борюсь с манипулирующим атрибутами <код> node . Я могу получить доступ к ним, но я не могу их установить, как <код> node.attributes.setNamedItem(...) требует <код> raw.Attr аргумент, который у меня проблемы с созданием, нет конструктора, чтобы установить <код> name name > Attr .

Также, идя на API низкого уровня довольно неудобно. Я бы предпочел получить выбор некоторых класс, который легче манипулировать, например, <Код> Element .

Любые идеи?

Английский оригинал

I'm struggling with something seemingly simple.

Using Scaja.JS, I have generated some SVG with the ScalaTags library.

I now wish to manipulate the SVG elements using events:

circ.onclick = { e: dom.MouseEvent => ... } 

Specifically, I want to select all elements of a certain class and then toggle some class attributes on them.

I tried the Scala.js JQuery binding. While I can retrieve selections with it, I cannot manipulate the selected elements (set classes etc). This seems to be a fundamental problem of SVG being a different kind of DOM which cannot be manipulated with JQuery.

Next, I tried the low level DOM API. This gets me the selection:

document.body.getElementsByClassName("myClass").foreach { node =>  ... } 

I now struggle with manipulating attributes of node. I can access them but I cannot set them, as node.attributes.setNamedItem(...) requires a raw.Attr argument which I have trouble creating, There is no constructor to set the name of the Attr.

Also, going for the low level API is quite inconvenient. I'd prefer to get a selection of some class that is easier to manipulate, e.g. Element.

Any ideas?

</div
              
 
 

Список ответов

4
 
vote
vote
Лучший ответ
 

Нет конструктора для <код> Attr в JavaScript DOM API. Попытка оценить <код> new Attr() в JavaScript приведет к типу «нелегального конструктора». Однако вы можете создать атрибуты с использованием document.createAttribute(name: String) .

Хотя <код> getElementsByClassName возвращает odelist, каждый элемент будет фактически быть элементом (вам придется снизить это с сопоставлением или аналогичным образом). Из <Код> dom.Element Вы можете вызвать <код> setAttribute(name: String, value: String) , который может быть более удобным, чем вручную, создавая <код> Attr S на таком низком уровне.

Кроме того, способность jQuery выбирать элементы DOM с использованием выражений, в настоящее время в основном встроен в DOM, используя <код> document.querySelectorAll . Вы можете попробовать что-то вроде <код> svgDocument.querySelectorAll(".foo").map(_.asInstanceOf[dom.raw.SVGElement]) .foreach { _.setAttribute("someAttribute", "newValue") } .

Конечно - для лечения odelist в качестве Scala Collection потребуется <код> import org.scalajs.dom.ext._ , чтобы принести непливные области, но выглядит так, как будто вы уже делаете это.

 

There is no constructor for Attr in the javascript DOM api, either. Attempting to evaluate new Attr() in javascript will result in an "Illegal constructor" TypeError. You can however create attributes using document.createAttribute(name: String).

Although getElementsByClassName is returning a NodeList, each item will actually be an Element (you will have to downcast this with pattern matching or similar). From a dom.Element you can invoke setAttribute(name: String, value: String) which may be more convenient than manually creating Attrs at such a low level.

Also, jQuery's ability to select elements of the dom using expressions has now been mostly built into the DOM using document.querySelectorAll. You might try something like svgDocument.querySelectorAll(".foo").map(_.asInstanceOf[dom.raw.SVGElement]) .foreach { _.setAttribute("someAttribute", "newValue") }.

Of course- to treat a NodeList as a Scala Collection will require import org.scalajs.dom.ext._ to bring the implicits into scope, but it looks as though you're already doing that.

</div
 
 
 
 

Связанный проблема

1  jquery адрес плагин  ( Jquery address plugin issue ) 
Я использую плагин jQuery Address, я реализовал плагин на странице списка, когда я нажимаю на одну из ссылок, функция будет вытащить данные, используя AJAX и ...

0  Как вы делаете Div пойти по другому меню Div / NAV, которое не исправлено?  ( How do you make a div go under another div nav menu which is not fixed ) 
Я пытаюсь сделать Div, идут под очередной div, в котором ни один не фиксирован элементы. Вот мой код: <Код> ul { list-style-type: none; margin: ...

5  модальный всплывающий как Google  ( Modal pop up like google ) 
Как сделать модальное всплывающее окно, как Gmail (когда мы пытаемся загрузить EXE, который генерирует крышки прокрутки страницы) ...

0  Jquery value изменить жить  ( Jquery value change live ) 
Пожалуйста, обратитесь к этому HTML. <код> <input type="text" name="amount1" value="10" /> <input type="text" name="amount2" value="5" /> <input type="text"...

0  jQuery Validator Плагин и Радио кнопки Проблемы  ( Jquery validator plugin and radio buttons issues ) 
У меня есть проблема с плагином Validator jQuery & AMP; Радио-кнопки. У меня есть набор из трех "lookingfor" Радиоугольники ... и я хочу убедиться, что хотя...

0  Ошибка прокладывания слайдера jQuery: ... не удалось конвертировать аргумент JavaScript ARG 0 [NSIDOMHTMLanChorElement.appendChild]  ( Jquery slider throwing error could not convert javascript argument arg 0 ns ) 
Наш сайт Dev Dev имеет ползунок отлично работает здесь: http://allblacks.01dev.co.nz/index.cfm layout = dnahome Однако мы просто поставили сайт Live, и ...

0  jquery widget factory setoptions и setoption  ( Jquery widget factory setoptions and setoption ) 
Можете ли вы помочь, помогите, я пытаюсь понять концепцию <код> setOptions и <код> setOption на заводе виджета. в коде ниже я подумал, что если я изменил ...

1  Функция валидации угловых JS Возвращает до завершения вызова API для проверки  ( Angular js validation function returns before the api call for validation is com ) 
<код> if (!validate()) { return; }; function validate() { var nameIsValid = ...

-1  Jquery первый раз попробовал ajax  ( Jquery first time tried ajax ) 
Это я впервые попробовал ajax, кнопку нажала, но ничего не произойдет, если это должно быть предупреждено, когда успех? Любой может помочь мне взглянуть, пожа...

2  Как получить выделенные тексты?  ( How to get the highlighted texts ) 
Я пытаюсь получить выбранные тексты от пользователя (выделенный текст, который выделяет пользователь). У меня есть следующее: <код> function getSelectedTe...

0  Boxy Эта отправка не работает  ( Boxy this submit does not work ) 
У меня есть несколько форм в моем коде, и я хочу назначить подтверждающее поле, чтобы показать, прежде чем он будет отправлен. Следовательно, я использую Bo...

0  Почему это работает над сафари и Firefox, но не на хроме?  ( Why is this working on safari and firefox but not on chrome ) 
У меня есть адаптивное меню навигации, он работает следующим образом: при изменении размера окна появляется значок «Гамбургер» (три строки). Нажатие на этот з...

0  Обработчик событий не обнаруживается внутри $ (документ). Ready () [закрыто]  ( Event handler not getting detected inside document ready ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> закрыто. Этот вопрос не воспроизводится или был вызван опечаткам...

2  Совет инструмента не работает на текстовой зоне Bootstrap  ( Tool tip not working on text area bootstrap ) 
У меня есть форма Bootstrap 3, на которой я применяю Tootip через скрипт. Toottip работает нормально на поле ввода, но не работает над Textarea. <код> <div ...

0  Разрежьте строку в JavaScript [Закрыто]  ( Cut the string in javascript ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> закрыт. Этот вопрос не соответствует Рекомендациям переполнения ...




© 2021 www.qaru.top All Rights Reserved. Q&A House все права защищены


Licensed under cc by-sa 3.0 with attribution required.