當使用jQuery .load在該DIV中更改HTML時，將初始HTML加載到DIV中

我有一些基本的jQuery正在更改單個div的內容。我唯一無法弄清楚的是，如何在頁面第一次加載時顯示四個外部HTML文件之一（即，lookbook20141217.HTML）作爲默認值。現在，容器DIV「lookBookWindow」是空的，直到點擊其中一個「按鈕」。當使用jQuery .load在該DIV中更改HTML時，將初始HTML加載到DIV中

JSFIDDLE

HTML

<div id="lookBookMain"> 

<div id="lookBookWindow"></div> 

<input id="lookbook20141217" class="thumbnail rm" type="image" src="thumbnails/20141217.jpg" alt="maurices lookbook20141217" width="220" height="220" border="0" /> 
<input id="lookbook20141114" class="thumbnail rm" type="image" src="thumbnails/20141114.jpg" alt="maurices lookbook20141114" width="220" height="220" border="0" /> 
<input id="lookbook20141018" class="thumbnail rm" type="image" src="thumbnails/20141018.jpg" alt="maurices lookbook20141018" width="220" height="220" border="0" /> 
<input id="lookbook20141016" class="thumbnail" type="image" src="thumbnails/20141016.jpg" alt="maurices lookbook20141016" width="220" height="220" border="0" /> 

</div>

CSS

#lookBookMain { 
    width: 940px; 
    margin: 0px auto; 
    padding: 0px; 
    position: relative; 
} 

#lookBookWindow { 
    width: 940px; 
    height: 580px; 
    margin: 0px; 
    padding: 0px; 
} 

.thumbnail { 
    width: 220px; 
    height: 220px; 
    margin: 0px; 
    padding: 20px 0px 0px 0px; 
    position: relative; 
    float: left; 
} 

input.thumbnail:focus { 
    outline-width: 0; 
} 

.rm{ 
    margin-right: 20px; 
}

JQUERY

$('input[type="image"]').click(function() { 
    var pageName = this.id; 
    $('#lookBookWindow').load(pageName + '.html'); 
});

我覺得這應該只是在jQuery的另一條線，但我沒有找到我需要的在線。提前致謝！

來源

2014-10-17 paulmz

如果你想加載一個特定的頁面，只需要它在點擊處理程序之外。

另一種選擇是觸發第一個圖像上點擊：

$('input[type="image"]').click(function() { 
    var pageName = this.id; 
    $('#lookBookWindow').load(pageName + '.html'); 

}).first().click();

來源

2014-10-17 20:48:43

看起來這個選項會更加動態，因爲無論按鈕被添加/刪除/重新排列，它總是會觸發**第一個**「按鈕」。如果我的理解正確，這意味着我將不必調整jquery添加按鈕和HTML文件的容器DIV ...對嗎？ – paulmz 2014-10-17 21:03:42

這是正確的。關於面向未來的話題，我建議給這些輸入一個普通的類並在你的選擇器中使用它。目前，如果您添加不應包含在此邏輯中的圖像輸入，您將遇到問題。 – 2014-10-17 21:06:32

感謝您的提示。我在「輸入」中已經有了一個普通的「縮略圖」類，所以我只是將該類添加到了選擇器中：$（'input [type =「image」]，.thumbnail'）當然，請隨時讓我知道我是否做錯了。 – paulmz 2014-10-17 21:18:40

我覺得這應該只是在jQuery的

這是另一條線。外：

$('input[type="image"]').click(function() { 
    var pageName = this.id; 
    $('#lookBookWindow').load(pageName + '.html'); 
});

地址：

$('#lookBookWindow').load('lookbook20141217.html');

使用哪個HTML文件要首先加載英寸

來源

2014-10-17 20:46:33 j08691

是啊，這就是我失蹤了。謝謝！ – paulmz 2014-10-17 20:49:53

當使用jQuery .load在該DIV中更改HTML時，將初始HTML加載到DIV中

回答

相關問題