0

画像を動的に変更するための以下のコードがあります。正常に動作しますが、いくつか質問があります。

1 - なぜ

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

働くが

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

動作しませんか？attr() の代わりに data() を使用する方法はありますか?

2 - 選択したオプションの data-parameters 値からデータを取得します

選択したオプションのデータパラメータから値を取得するにはどうすればよいですか?

<!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>
4

1 に答える 1

1

はい、データを使用して追加情報を保存できます。その情報を取得および設定できます。これは、単純な文字列または jquery データを使用した複雑なオブジェクトである可能性があります。属性の設定とは異なり、このデータ オブジェクトはソース ビューから隠されます。

設定

$('#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" } );

得る

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

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

その変数を取得したら、それをdivに適用できます

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

jqueryデータのAPI

于 2014-01-26T13:48:01.737 に答える