1. 首頁
  2. 問答
  3. javascript：根據選擇框的值顯示圖像

javascript：根據選擇框的值顯示圖像

2017-10-20 247 views
1

在我的程序中，我創建了選擇框和按鈕。在選擇框中選擇不同的值時，應如圖所示顯示預期輸出。在更改圖像前後有兩個按鈕。這也應該相應地工作。我在下面創建了代碼，但我的代碼沒有按預期工作。誰能幫我 ？javascript：根據選擇框的值顯示圖像

代碼：

// counter 
 
var i = 0; 
 

 
// create object 
 
imageObj = new Image(128, 128); 
 

 
// set image list 
 
images = new Array(); 
 
images[0] = "final_images/wcoat.jpg"; 
 
images[1] = "final_images/wcoat.jpg"; 
 
images[2] = "final_images/ktoys.jpg"; 
 
images[3] = "final_images/mixture.jpeg"; 
 
images[4] = "final_images/earing.jpg"; 
 

 
var imgLen = imageObj.length; 
 

 
var go = document.getElementById('go'); 
 
go.addEventListener("click", loadItem); 
 

 
function loadItem() { 
 

 
    var mainDiv = document.getElementById("main"); 
 

 
    var btnPre = document.createElement("input"); 
 
    //Assign different attributes to the element. 
 
    btnPre.type = "button"; 
 
    btnPre.value = "previous"; 
 
    btnPre.id = "preBtn"; 
 

 
    mainDiv.appendChild(btnPre); 
 

 
    preBtn.addEventListener('click', prvs); 
 

 
    var holder = document.getElementById("holder"); 
 

 
    if (document.getElementById('selectBox').value == "womens") { 
 
    holder.src = images[0] + "<br>" + " Women's coat"; 
 
    } else if (document.getElementById('selectBox').value == "mens") { 
 
    holder.src = images[1] + "<br>" + " Men's coat"; 
 
    } else if (document.getElementById('selectBox').value == "kids") { 
 
    holder.src = images[2] + "<br>" + " Kid's toys"; 
 
    } else if (document.getElementById('selectBox').value == "mixture") { 
 
    holder.src = images[3] + "<br>" + " Classic mixture"; 
 
    } else if (document.getElementById('selectBox').value == "earing") { 
 
    holder.src = images[4] + "<br>" + " Gold Earing"; 
 
    } 
 

 
    var btnNxt = document.createElement("input"); 
 
    //Assign different attributes to the element. 
 
    btnNxt.type = "button"; 
 
    btnNxt.value = "next"; 
 
    btnNxt.id = "nxtBtn"; 
 

 
    mainDiv.appendChild(btnNxt); 
 

 
    nxtBtn.addEventListener('click', nxt); 
 
} 
 

 
function nxt() { 
 
    if (i < imgLen - 1) { 
 
    i++; 
 
    } else { 
 
    i = 0; 
 
    } 
 

 
    imageObj.src = images[i]; 
 
} 
 

 
function prvs() { 
 
    if (i > 0) { 
 
    i--; 
 
    } else { 
 
    i = imgLen - 1; 
 
    } 
 
    imageObj.src = images[i]; 
 
}
body { 
 
    background-image: url("final_images/back.jpg"); 
 
} 
 

 
.container { 
 
    /*width: 600px;*/ 
 
    /*height: 200px;*/ 
 
    border: inset; 
 
    background-color: rgba(255, 234, 134, 0.9); 
 
} 
 

 
#selectBox { 
 
    margin-left: 210px; 
 
    width: 160px; 
 
} 
 

 
#below_hr { 
 
    width: 600px; 
 
    background-color: #ffffff; 
 
} 
 

 
#preBtn { 
 
    margin-left: 170px; 
 
    margin-top: 170px; 
 
}
<div class='container' id="main"> 
 
    <form name="myForm"> 
 
    <select name="mySelect" id="selectBox"> 
 
     \t \t \t \t <option value="womens">Women's coat</option> 
 
     \t \t \t \t <option value="mens">Men's coat</option> 
 
     \t \t \t \t <option value="kids">Kid's toys</option> 
 
     \t \t \t \t <option value="mixture">Classic mixture</option> 
 
     \t \t \t \t <option value="earing">Gold Earing</option> 
 
     \t \t \t </select> 
 
    <INPUT TYPE="button" VALUE="Go" id="go"> 
 
    </INPUT> 
 
    </form> 
 
    <HR size="4" color="red" id="hr"> 
 

 
    <div id="holder"> </div> 
 
</div>

來源

2017-10-20 pari

+0

誰能幫助我嗎？ – pari

回答

2

有一些微小的錯誤都加入到這個不工作，我會盡力記住，並指出它們。這是隻有2圖像一個工作示例 - 你可以填寫你回來

  1. 你有你的形象「持有人」一個div這應該是一個<img /> 標籤
  2. var imgLen = imageObj.length;應該var imgLen = images.length;使用你的數組的長度不是obj。
  3. preBtn.addEventListener應該btnPre.preBtn不存在
  4. holder.src = images[0] + "<br>" + " Women's coat"; src屬性必須是一個有效的URL，你的混亂，若你追加<br>和一個字符串給它。
  5. imageObj.src=images[i];需要引用你的「持有人」不imageObj所以應該是document.getElementById("holder").src = images[i];
  6. 你並不需要動態地把下一個和上一個按鈕每個圖像負載（你甚至不清理它們），DOM中保持與按鈕堆積。
  7. 你應該使用數字作爲值，所以你可以選擇設置在下次的正確描述和prev
  8. 你需要保持我的跟蹤，當用戶在選擇跳躍（集我就選擇其他城市）

// counter 
 
var i = 0; 
 

 
// create object 
 
imageObj = new Image(128, 128); 
 

 
// set image list 
 
images = new Array(); 
 
images[0] = "https://cdn-image.myrecipes.com/sites/default/files/summer-sweet-lemonade-cl.jpg"; 
 
images[1] = "http://www.greatamericancookies.com/app/themes/greatamericancookies/library/images/home/carousel3.png"; 
 
images[2] = "final_images/ktoys.jpg"; 
 
images[3] = "final_images/mixture.jpeg"; 
 
images[4] = "final_images/earing.jpg"; 
 

 
var imgLen = images.length; 
 

 
var go = document.getElementById('go'); 
 
var select = document.getElementById('selectBox'); 
 
var desc = document.getElementById('desc'); 
 
go.addEventListener("click", loadItem); 
 

 
function loadItem() { 
 
    var holder = document.getElementById("holder"); 
 

 
    if (document.getElementById('selectBox').value == 0) { 
 
    holder.src = images[0]; 
 
    desc.innerHTML = document.getElementById("select0").getAttribute("data-desc"); 
 
    i = 0; 
 
    } else if (document.getElementById('selectBox').value == 1) { 
 
    holder.src = images[1]; 
 
    desc.innerHTML = document.getElementById("select1").getAttribute("data-desc"); 
 
    i = 1; 
 
    } else if (document.getElementById('selectBox').value == 2) { 
 
    holder.src = images[2]; 
 
    desc.innerHTML = document.getElementById("select2").getAttribute("data-desc"); 
 
    i = 2; 
 
    } else if (document.getElementById('selectBox').value == 3) { 
 
    holder.src = images[3]; 
 
    desc.innerHTML = document.getElementById("select3").getAttribute("data-desc"); 
 
    i = 3; 
 
    } else if (document.getElementById('selectBox').value == 4) { 
 
    holder.src = images[4]; 
 
    desc.innerHTML = document.getElementById("select4").getAttribute("data-desc"); 
 
    i = 4; 
 
    } 
 
    document.getElementById('prev').style.display = ""; 
 
    document.getElementById('next').style.display = ""; 
 
} 
 

 
function nxt() { 
 
    if (i < imgLen - 1) { 
 
    i++; 
 
    } else { 
 
    i = 0; 
 
    } 
 
    select.value = i; 
 
    desc.innerHTML = document.getElementById("select" + i).getAttribute("data-desc"); 
 
    document.getElementById("holder").src = images[i]; 
 
} 
 

 
function prvs() { 
 
    if (i > 0) { 
 
    i--; 
 
    } else { 
 
    i = imgLen - 1; 
 
    } 
 
    select.value = i; 
 
    desc.innerHTML = document.getElementById("select" + i).getAttribute("data-desc"); 
 
    document.getElementById("holder").src = images[i]; 
 
}
body { 
 
    background-image: url("final_images/back.jpg"); 
 
} 
 

 
img { 
 
    width: 200px; 
 
} 
 

 
.container { 
 
    /*width: 600px;*/ 
 
    /*height: 200px;*/ 
 
    border: inset; 
 
    background-color: rgba(255, 234, 134, 0.9); 
 
} 
 

 
#selectBox { 
 
    margin-left: 210px; 
 
    width: 160px; 
 
} 
 

 
#below_hr { 
 
    width: 600px; 
 
    background-color: #ffffff; 
 
} 
 

 
#preBtn { 
 
    margin-left: 170px; 
 
    margin-top: 170px; 
 
}
<div class='container' id="main"> 
 
    <form name="myForm"> 
 
    <select name="mySelect" id="selectBox"> 
 
    \t \t \t \t <option id="select0" data-desc="a womans coat" value=0>Women's coat</option> 
 
    \t \t \t \t <option id="select1" data-desc="a mens winter coat" value=1>Men's coat</option> 
 
    \t \t \t \t <option id="select2" data-desc="a kids toy to play with" value=2>Kid's toys</option> 
 
    \t \t \t \t <option id="select3" data-desc="a classic mixture" value=3>Classic mixture</option> 
 
    \t \t \t \t <option id="select4" data-desc="a beautiful gold earing" value=4>Gold Earing</option> 
 
    \t \t \t </select> 
 
    <INPUT TYPE="button" VALUE="Go" id="go"> 
 
    </INPUT> 
 
    </form> 
 
    <HR size="4" color="red" id="hr"> 
 

 
    <img id="holder" /><br/> 
 
    <span id="desc"></span><br/><br/> 
 
    
 
    <button id="prev" onclick="prvs()" style="display:none">Previous</button> 
 
    <button id="next" onclick="nxt()" style="display:none">Next</button> 
 
</div>

來源

2017-10-20 23:57:14

+0

非常感謝。讓我試試你的代碼 – pari

+0

我剛剛編輯它以提供更多的功能，如保持選擇與下一個和上一個按鈕上的圖像一致 –

+0

@Andreew我有一個小問題。上一個和下一個按鈕應該只在點擊「開始」按鈕後纔會顯示。 – pari

2

你有你的代碼，安德魯（+1爲）內相當多的錯誤已經列出他們在他的答案。 但我想你也許應該嘗試更加動態並從例如配置對象中創建選擇。

下面是一個例子：

// CLASS 
 
var ImageSelector = (function(doc) { 
 
    // private variables 
 
    var _config, 
 
     _selectionEl, 
 
     _imageEl, 
 
     _prevBtnEl, 
 
     _nextBtnEl, 
 
     _currentIndex = 0; 
 
    
 
    // constructor 
 
    function ImageSelector(config) { 
 
    var imageholderEl = doc.querySelector(config.imageholder); 
 
    _config = config; 
 
    _selectionEl = doc.querySelector(config.selection); 
 
    _prevBtnEl = doc.querySelector(config.prevBtn); 
 
    _nextBtnEl = doc.querySelector(config.nextBtn); 
 
    if(!_selectionEl || !imageholderEl) { 
 
     throw new Error('no selection or imageholder element found'); 
 
    } 
 
    _imageEl = new Image(); 
 
    imageholderEl.appendChild(_imageEl); 
 
    _generateSelection(); 
 
    _bindEvents(); 
 
    } 
 
    
 
    // private methods 
 
    function _generateSelection() { 
 
    var fragment = doc.createDocumentFragment(); 
 
    var items = _config.items; 
 
    
 
    for(var i = 0; i < items.length; ++i) { 
 
     var item = items[i]; 
 
     var option = doc.createElement('option'); 
 
     option.value = item.value; 
 
     option.textContent = item.name; 
 
     fragment.appendChild(option); 
 
    } 
 
    _selectionEl.appendChild(fragment); 
 
    _selectionEl.selectedIndex = _currentIndex; 
 
    } 
 

 
    function _loadImage() { 
 
    var items = _config.items; 
 
    var item = items.find(itm => itm.value === _selectionEl.value); 
 
    _imageEl.src = item.image; 
 
    _prevBtnEl.style.display = null; 
 
    _nextBtnEl.style.display = null; 
 
    } 
 
    
 
    function _bindEvents() { 
 
    var goBtnEl = doc.querySelector(config.goBtn); 
 
    _selectionEl.addEventListener('change', _loadImage); 
 
    if(_prevBtnEl) { 
 
     _prevBtnEl.addEventListener('click', ImageSelector.prototype.prev); 
 
     _prevBtnEl.style.display = 'none'; 
 
    } 
 
    if(_nextBtnEl) { 
 
     _nextBtnEl.addEventListener('click', ImageSelector.prototype.next); 
 
     _nextBtnEl.style.display = 'none'; 
 
    } 
 
    goBtnEl && goBtnEl.addEventListener('click', _loadImage) 
 
    } 
 
    
 
    function _changeIndex(direction) { 
 
    var length = _config.items.length; 
 
    _currentIndex = (_currentIndex + direction) % length; 
 
    if(_currentIndex < 0) _currentIndex = length -1; 
 
    _selectionEl.selectedIndex = _currentIndex; 
 
    _selectionEl.dispatchEvent(new Event('change')); 
 
    } 
 
    
 
    // public methods 
 
    ImageSelector.prototype.next = function() { 
 
    _changeIndex(1); 
 
    } 
 

 
    ImageSelector.prototype.prev = function() { 
 
    _changeIndex(-1); 
 
    } 
 

 
    return ImageSelector; 
 
})(document); 
 

 

 
// CONFIGURATION 
 
var config = { 
 
    selection: '#selectBox', 
 
    imageholder: '#holder', 
 
    goBtn: '#go', 
 
    prevBtn: '#prev', 
 
    nextBtn: '#next', 
 
    items: [ 
 
    { name: "Women's coat", value: "womens", image: "https://thumb7.shutterstock.com/display_pic_with_logo/562036/116906134/stock-photo-portrait-of-brown-eyed-cat-isolated-on-white-background-116906134.jpg" }, 
 
    { name: "Men's coat", value: "mens", image: "https://thumb1.shutterstock.com/display_pic_with_logo/154447/235089946/stock-photo-cute-little-red-kitten-sleeps-on-fur-white-blanket-235089946.jpg" }, 
 
    { name: "Kid's toys", value: "kids", image: "https://thumb9.shutterstock.com/display_pic_with_logo/2288597/574871668/stock-photo-brown-cat-playing-relaxed-on-the-mobile-574871668.jpg" }, 
 
    { name: "Classic mixture", value: "mixture", image: "https://thumb9.shutterstock.com/display_pic_with_logo/4363153/520870675/stock-photo-lovely-cat-in-human-hands-vintage-effect-love-for-the-animals-520870675.jpg" }, 
 
    { name: "Gold Earing", value: "earing", image: "https://thumb9.shutterstock.com/display_pic_with_logo/428239/454556905/stock-photo-happy-scottish-kitten-looking-at-camera-isolated-on-white-background-454556905.jpg" } 
 
    ] 
 
} 
 

 
// INITIALISATION 
 
var selector = new ImageSelector(config);
body { 
 
    background-image: url("final_images/back.jpg"); 
 
} 
 

 
img { 
 
    width: 200px; 
 
} 
 

 
.container { 
 
    /*width: 600px;*/ 
 
    /*height: 200px;*/ 
 
    border: inset; 
 
    background-color: rgba(255, 234, 134, 0.9); 
 
} 
 

 
#selectBox { 
 
    margin-left: 210px; 
 
    width: 160px; 
 
} 
 

 
#below_hr { 
 
    width: 600px; 
 
    background-color: #ffffff; 
 
} 
 

 
#preBtn { 
 
    margin-left: 170px; 
 
    margin-top: 170px; 
 
}
<div class='container' id="main"> 
 
    <form name="myForm"> 
 
    <select name="mySelect" id="selectBox"> 
 
     
 
    </select> 
 
    <input type="button" value="Go" id="go" /> 
 
    </form> 
 
    <hr size="4" color="red" id="hr" /> 
 

 
    <div id="holder"></div> 
 
    
 
    <button id="prev">Previous</button> 
 
    <button id="next">Next</button> 
 
</div>

來源

2017-10-21 00:39:15 cyrix

+0

我想在div標籤上顯示圖像。 – pari

+1

編輯它;）但是我們不是一個編碼服務，我的代碼是一個例子，可以如何解決您的問題，可以進一步調整以適應您的即將到來的需求。 – cyrix

+0

很酷的東西cyrix。我試着保持它與OP一樣，因爲他會更好地理解它，但是這會把它從水中吹出來！做得好！ +1 –

相關問題

 相關問題