Используйте jQuery. data() с выбором

У меня есть код, используемый для динамического изменения изображения. Он работает как надо, но у меня есть несколько вопросов:Используйте jQuery. data() с выбором

1 - Почему

$('#image').attr('data-picture-name', $this.val());

работы, но

$('#image').data('picture-name', $this.val());

не работают? и есть ли способ использовать данные() вместо attr()?

2 - Получение данных от значения данных параметров-в выбранной опции

Как я могу получить значение из данных-параметров в выбранной опции?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="shortcut icon" href="docs-assets/ico/favicon.png"> 
    <title></title> 
</head> 
<body> 
    <img data-picture-name="popol" src="" id="image" style="width: 1200px; height: 500px; border: 1px solid red;" /> 
    <select name="meteo-list-cities" id="meteo-list-cities" class="triggered" data-trigger-change-call="meteo-country-change-trigger"> 
     <option data-parameters="1" value="assets/images/newyork.jpg">New York</option> 
     <option data-parameters="2" value="assets/images/paris.jpg">Paris</option> 
     <option data-parameters="3" value="assets/images/london.jpg">London</option> 
    </select> 

    <script src="assets/js/plugins/jquery/jquery.min.js"></script> 
    <script> 
     jQuery(document).ready(function($) { 
      $('#meteo-list-cities').on('change', function() { 
       var $this= $(this); 
       $('#image').attr('data-picture-name', $this.val()); 
       $('#image').attr('src', $this.val()); 
      }); 
     }); 
    </script> 
</body> 
</html>

источник

2014-01-26 Lolo

'.data() 'метод не изменяет' data- * ', он изменяет свойства за сценой, возможно, поэтому вы считаете, что это не работает. – undefined

Может быть :) Но если я покажу значение data-picture-name, с data(), у меня всегда будет popol, но с attr() у меня есть правильный путь к изображению. – Lolo

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

SET

$('#image').data('cityImgPath', $this.val()); 

$('#image').data('complexColorObj', { imgPath: "http://i.dailymail.co.uk/i/pix/2012/04/24/article-2134408-12BFD96D000005DC-434_964x788.jpg", color: "blue", mood: "depressed" });

GET

var newImagePath = $('#image').data('cityImgPath'); 

var myMoodBeforeCoffee = $('#image').data('complexColorObj').mood;

После того как вы эту переменную, то вы можете применить его к DIV

$('#image').attr('src', newImagePath);

api for jquery data

источник

2014-01-26 13:48:01 headwinds

Интересно. С ответом Blacksheep я понял, что должен использовать attr() вместо data() для отображаемых атрибутов, но если я хочу скрыть некоторые данные, я мог бы использовать data(). – Lolo

Используйте jQuery. data() с выбором

ответ

Смежные вопросы