Javascript - 在选择时更改图像和文本

Question

我是 javascript 的新手，仍在学习。我正在尝试根据用户从下拉列表中选择的内容更改 div 中的文本和图像。我可以更改图像或更改文本，但不能同时更改。如果有人能指出我正确的方向并告诉我我的代码哪里出错了，我将不胜感激。代码如下:

Javascript

function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("swapImg");
    image.src = dropd.value;    


    var model = document.getElementById("model");
    var heading = document.getElementById("heading3");
    var textGrey = document.getElementById("textGrey");
    var textGrey2 = document.getElementById("textGrey2");

    if(dropd.value == "images/1.jpg"){

        model.innerHTML = "A4";
        heading.innerHTML="This text matches A4 model";
        textGrey.innerHTML="kjhkjh we ewf kjikjkj we";
        textGrey2.innerHTML="hf efjkj efe  edeeeeejm dff";
        return false;
    }

    else if (dropd.value == "images/2.jpg"){
        model.innerHTML = "A6";
        heading.innerHTML ="This text matches A6 model"; 
        textGrey.innerHTML ="xxx xxxxx xxxxx xxxx";
        textGrey2.innerHTML="yy yyyy yyyy yy";
        return false;
    }

    else if (dropd.value =="images/3.jpg"){
        model.innerHTML = "A8";
        heading.innerHTML ="This text matches the A8 model"; 
        textGrey.innerHTML ="zzzz zzzzz";
        textGrey2.innerHTML="pppp ppp pp p p";
        return false;
    }
}

HTML - 更改文本和图像的 div

 <div id="carbox">
   <h2 id="model" class="model">A6
<img id="imageToSwap" src="images/3.jpg" width="544" height="203" style="margin-left:275px; margin-top:-82px" />
</h2>

    <div id="carbox-bottom">
    <h3 id="heading3" class="heading3">Loren ipsum dolor sit ame</h3>
    <p id="textGrey" class="textGrey">Coisteahi fwior he qvbsi dolo wetiuyy thuoi loren ipsum dolar </p>
    <p id="textGrey2" class="textGrey2">Coisteahi fwior he qvbsi dolo</p> 
    </div>  
    </div>
    <!--End carbox-->

下拉菜单

<select id="swapImg" name="model" class="modelSelect" onchange="swapImage()" >
   <option value="images/1.jpg">A4</option>
<option value="images/2.jpg" selected="selected">A6</option>
<option value="images/3.jpg">A8</option>
</select>

Answer 1

您可以使用 HTML5 data attribute为任何元素分配多个值。

使用数据属性为每个选择选项(在您的情况下)分配“标题、描述、图像 url”，并访问这些值 onChange dropdown 列表的事件 javascript。

HTML

<select id="swapImg" name="model" class="modelSelect" onchange="swapImage()" >
   <option value="images/1.jpg" data-model="A4" data-heading="Model A4 heading" data-description="Model A4 description">A4</option>
   <option value="images/2.jpg" data-model="A6" data-heading="Model A6 heading" data-description="Model A6 description" selected="selected">A6</option>
   <option value="images/3.jpg" data-model="A8" data-heading="Model A8 heading" data-description="Model A8 description">A8</option>
</select>

Javascript

<script>
    function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("swapImg");
    image.src = dropd.value;   

    //getting selected option
    var option= dropd.options[dropd.selectedIndex];
    //getting dataset of option (defined with data attributes)
    var data=option.dataset;

    //accessing data attribute values
    console.log(data.model);
    console.log(data.heading);
    console.log(data.description);


    var model = document.getElementById("model");
    var heading = document.getElementById("heading3");
    var textGrey = document.getElementById("textGrey");

    model.innedHTML=data.model;
    heading.innedHTML=data.heading;
    textGrey.innedHTML=data.description;

}
</script>

演示 jsFiddle

引用:

1. > About HTML5 data-attribute
2. > Accessing data-attribute in javascript
3. > using jQuery to work with data-attribute (very easy)