jQuery來代替整個基於瀏覽器窗口

我試圖加載基於瀏覽器窗口動態側邊欄的頁面圖像路徑。如何用jQuery變量替換圖像路徑的特定字詞？jQuery來代替整個基於瀏覽器窗口

我的代碼：

body> 
<div id="wrapper"> 
    <div id="aside"> </div> 
    <div id="content"> 
     <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1> 
     <p><img src="img/bar-0/sample.jpg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet justo vel diam interdum posuere. <img src="img/bar-0/sample1.jpg">Aliquam erat volutpat. Nulla sed libero nunc. Cras in lacus in dolor feugiat scelerisque nec id nisi.</p> 

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet justo vel diam interdum posuere. Aliquam erat volutpat. <img src="img/bar-0/sample2.jpg">Nulla sed libero nunc. Cras in lacus in dolor feugiat scelerisque nec id nisi.<img src="img/bar-0/sample2.jpg"></p> 
    </div> 

</div> 
<script type="text/javascript"> 
$(document).ready(function() { 
var curwidth, script, prevclass; 

function reloadBars(width) { var newclass 
     width = parseInt(width, 10); 
    newclass = "" 
    if (width < 801 && (curwidth == -1 || curwidth > 800)) { 
     newclass = 'bar-0'; 
     bar = '800.php'; 
    } else if ((width > 800 && width < 1201) && (curwidth < 800 || curwidth > 1201)) { 
     newclass = 'bar-1'; 
     bar = '1000.php'; 
    } else if ((width > 1200 && width < 1601) && (curwidth < 1200 || curwidth > 1601)) { 
     newclass = 'bar-2'; 
     bar = '1200.php'; 
    } else if (width > 1600 && curwidth < 1600) { 
     newclass = 'bar-3'; 
     bar = '1600.php'; 
    } else { 
     return; 
    } 
    $.ajax({ 
     type: "POST", 
     url: bar, 
     data: {}, 
     success: 
     function(response) { 
      $('#aside').html(response); 

      $('#aside').addClass(newclass); 
      $("#aside").removeClass(prevclass); 

     $("img").each(function() { 
      var src = $(this).attr('src'); 
      src = src.replace(prevclass, newclass); 
      $(this).attr('src', src); 
     }); 

     prevclass = newclass; 


     }, 
     error: function(e) { 
      alert("UH OH! Error!"); 
     } 
    }); 
    curwidth = width; 
} 
prevclass = "" 
curwidth = -1; 
reloadBars($(this).width()); 

    $(window).resize(function() { 
     reloadBars($(this).width()); 
    }); 
}); 

</script> 
</body>

這裏特別想無論它出現在<img>更換bar-0，與變量newclass值。我試圖通過使用此代碼以實現如上圖所示：

UPDATE：它給出了一個錯誤：

"NetworkError: 404 Not Found - http://localhost/final/bar-1img/bar-0/sample1.jpg"

理想的路徑應該是http://localhost/final/img/bar-1/sample1.jpg就應更換bar-0但之前追加img/。

來源

2013-07-02 Vikram Rao

完整的答案，這依賴於初始文本。但是你肯定會想再次使用prevclass和newclass。

//do this after the $.ajax portion of the reloadBars() function. Remove the previous call of prevclass = newclass and place it after the following code. 

$("img").each(function() { 
    var src = $(this).attr('src') 
    src = src.replace(prevclass, newclass) 
    $(this).attr('src', src) 
}) 

prevclass = newclass

來源

2013-07-02 20:28:23

後，我已經忘了）}。我編輯了我的帖子。 –

''NetworkError：404 Not Found - http：//localhost/final/bar-1img/bar-0/sample.jpg「sample.jpg'理想的路徑應該是'http：// localhost/final/img/bar -1/sample.jpg'它應該替換'bar-0'，但它會在'img /'之前追加。 –

您是否在現場進行任何測試？ –

你需要什麼來取代是「SRC」屬性，而不是內容。試試這個：

$("img").each(function() { 
    var src = $(this).attr('src'); 
    src = src.replace("bar-0", newclass); 
    $(this).attr('src', src); 
});

來源

2013-07-02 20:18:00 jero

jQuery來代替整個基於瀏覽器窗口

回答

相關問題