メソッド

HTML&CSS

lengthメソッドとは

lengthメソッドを用いると、jQueryオブジェクトの要素の個数を取得できます。

これはjavaScript基礎編で学んだlengthに似ていますね。

これを活用してスライドの枚数が変わっても、関数の内容が書き換えなくても済むようにしてみましょう。

script.js

$(’li’).length;

$(function() {

function toggleChangeBtn() {
var slideIndex = $(‘.slide’).index($(‘.active’));
$(‘.change-btn’).show();
if (slideIndex == 0) {
$(‘.prev-btn’).hide();
// 「3」の部分を、lengthメソッドを用いて書き換えてください
} else if (slideIndex == $(‘.slide’).length-1) {
$(‘.next-btn’).hide();
}
}

$(‘.index-btn’).click(function() {
$(‘.active’).removeClass(‘active’);
var clickedIndex = $(‘.index-btn’).index($(this));
$(‘.slide’).eq(clickedIndex).addClass(‘active’);
toggleChangeBtn();
});

$(‘.change-btn’).click(function() {
var $displaySlide = $(‘.active’);
$displaySlide.removeClass(‘active’);
if ($(this).hasClass(‘next-btn’)) {
$displaySlide.next().addClass(‘active’);
} else {
$displaySlide.prev().addClass(‘active’);
}
toggleChangeBtn();
});
});

連想配列を変数に代入する

連想配列も1つの値なので、配列と同様に、変数に代入することが出来ます。
左の図のように、console.log(fruit)とすると、定義した連想配列がそのまま出力される。

script.js
var fruit={"name":"apple","color":"red"};
console,log(fruit);
画面

{name;’apple’,color:’red’}

連想配列の値を取り出す

連想配列の値を取り出すには、対応するキーを用いて連想配列キーのようにします。

若しくは、連想配列キーの様に[]に中にキーを指定することでも取り出すことが可能です。

見出し
var fruit={“name”:”apple”,”color”:”red”}; console.log(fruit[“name”]);
画面

apple

apple

連想配列の値を更新する

配列と同じように、連想配列も値の上書きをすることが出来る。

配列キーの値とすることで、指定したキーに対応した値が更新されます。また、配列キーとしても更新することが出来る。

タイトルとURLをコピーしました