2

CMSを介してその画像に自動的に適用されるCSSで画像を選択し、クラスを追加しようとしています。これが私のスクリプトです：

$(document).ready(function() {
    if ($('.pageBody p img').css('float') === 'right') {
        $('.pageBody p img').addClass('float-right');
    }
});

そのスクリプトは、float: right適用された画像で問題なく機能します。適用された別の画像がありfloat: leftます。問題は、スクリプトで「右」を「左」に切り替えると、機能しないことです。たとえば、画像を設定してfloat: leftこのスクリプトを使用した場合、機能しません。

$(document).ready(function() {
    if ($('.pageBody p img').css('float') === 'left') {
        $('.pageBody p img').addClass('float-left');
    }
});
4

1 に答える 1

5

現在のコードは、関心のある画像がドキュメントの最初の画像である場合にのみ機能します。filter()を使用して、DOM 内の位置に関係なくその画像を見つけることができます。

$(document).ready(function() {
    $(".pageBody p img").filter(function() {
        return $(this).css("float") == "left";
    }).addClass("float-left");
});

または、スタイルの値に応じて、すべての画像に追加またはクラスを追加する関数を取るaddClass()の形式を使用できます。float-leftfloat-rightfloat

$(document).ready(function() {
    $(".pageBody p img").addClass(function() {
        var direction = $(this).css("float");
        if (direction == "left" || direction == "right") {
            return "float-" + direction;
        } else {
            return "";
        }
    });
});
于 2013-02-13T15:38:02.783 に答える