Question

假设我有一张大小为600x150px的spritesheet。两个图像包装类的宽度都是150px，包含精灵。现在，我想要做的是当文本框中有值时，我想将.image-wrapper的背景位置移动-150px。如果没有，它将返回其原始位置。

如果我只是切换背景颜色，如将其从红色变为蓝色，我将不会有任何问题，但我不知道该怎么做，因为它是我必须控制的背景位置。任何帮助，将不胜感激。谢谢！

HTML

 <div class="column">
        <div class="image-wrapper one">

        </div>
        <h5>TITLE</h5>
        <input type="text" class="tagged-input">
    </div>

    <div class="column">
        <div class="image-wrapper two">

        </div>
        <h5>TITLE</h5>
        <input type="text" class="tagged-input">
    </div>

CSS

.image-wrapper {
            width:160px;
            height:150px;
            background:url('spritesheet.png');
    }

            .one {
                    background-position: 0px;
             }

    .two {
        background-position: -300px;
    }

JS

$('.tagged-input').on('change',function(){
        if($(this).val() != "") {

        } else {

        }
    });

Answer 1

编辑：更新了jQuery和Working Sample

这个 jQuery 可能有所帮助：

    $('.tagged-input').change(function(){
     var currPos = $(this).parent("div").find(".image-wrapper").css('backgroundPosition').split(" ");
     var posX = Number(currPos[0].split("px")[0]);
        if($(this).val() != "") {
            var newPos = posX - 150 + "px";
            alert(newPos); /* just to check if I'm getting the right values */
            $(this).parent("div").find(".image-wrapper").css({"background-position": newPos});
            } 
        else {
            var newPos = posX + 150 + "px";
            alert(newPos); /* just to check if I'm getting the right values */
            $(this).parent("div").find(".image-wrapper").css({"background-position": newPos});
            }
   });

这将获取.image-wrapper的背景位置css属性的当前值，该属性是相关.tagged-input的兄弟，并根据.tagged-input的值更改属性值

<强> SAMPLE in jsFiddle

jquery - 更改文本框输入更改时的背景位置

1 个答案: