2016-03-23 9 views
3

これを調べることに問題があります。キーワード "id"を検索し、その値をインラインスタイルで変更してください

<div class="large-image" style="visibility: visible; cursor: default; background-image: url("images.sc?previewBinaryDataId=36"); background-position: 50% 50%;"> 
</div> 

イムは、ちょうどデータID値

任意の提案を変更することで、背景画像のURLを変更するためにjqueryのを使用しようと?

+0

現在のインラインスタイルを独自のCSSにすることはできませんか?あなたは "大きな画像"クラスを参照しているので、あなたはある種のシートを持っていると思います。 – Handonam

+0

いいえ、私はGoDaddy Shopのページを作った人を手伝っています。とても限られています。だから私はいくつかの機能を追加するためにjqueryを使用しています。サムネイルプレビューを追加しましたが、インラインスタイルの変更に問題があります。 "background-image:url()" @Handonam –

+0

'style'属性全体を文字列に読み込み、その文字列を'; 'で区切ります。その後、 "background-image"で始まる配列インデックスと適切な部分文字列である 'str.replace()'を見つけることができます。 – zeropublix

答えて

1

これを正しく理解している場合は、これらの画像を変更するために呼び出すことができるfunctionが必要ですか?多分?

function changeImg(newNum) { 
    var div = $('.large-image'); 
    var parts = div.css('background-image').split('='); 
    div.css({ 
     'background-image': parts[0] + '=' + newNum + '")' 
    }); 
} 

そして、あなたはそうのようにそれを呼び出すだけonClickにそれを添付するか、何かできます:さて、ここで一つだトリックを行う必要がありますが、そこだと私は推測している

changeImg(76); 

見越すHTMLはありません。

0

「データID」の値がないため、あなたの例が正しいかどうかわかりません。また、スタイルリストを終了する二重引用符(url(の直後)があります。あなたは

<div data-image-url="foo.jpg" id="myDiv" style="background-image:url('foo.jpg')"> 

になってしまうために、このような...

<div data-image-url="foo.jpg" id="myDiv"> 

として何かを得ることを望んでいますか?

もしそうなら、あなたは以下の

var image = $('#myDiv').data('image-url'); 
$('#myDiv').css("background-image", "url('" + image + "')"); 

編集を行うことができます:あなたはpreviewBinaryDataId値を置き換えるために探していたようはそれが見えます。あなたは、あなたがデータIDフィールドは、動的になりたかった場合

jQuery(document).ready(function(){ 
var number = 39; 
var backgroundNumber = "url('images.sc?previewBinaryDataId=" + number +"')"; 
    jQuery('.large-image').css({ 
    "background-image": backgroundNumber 
    }); 
}); 

:これは、あなたがこのような何かを試みることができる

var someNewId = 49 
var reg = new RegExp(/(?:previewBinaryDataId=)(\d+)/) 
$('#myDiv').css('background-image').replace(reg, 'previewBinaryDataId=' + someNewId); 
0

をあなたが(image.sc)を維持しようとしている画像ファイルを保持します変数numberを動的に変更するだけです。

https://fiddle.jshell.net/urxz8zoj/

・ホープ、このことができます:ここで

は、作業フィドルへのリンクです!

関連する問題