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

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

javascript jquery html

Javascript-在选择时更改图像和文本,javascript,jquery,html,Javascript,Jquery,Html,我对javascript非常陌生，而且仍在不断学习。我试图根据用户从下拉列表中选择的内容来更改div中的文本和图像。我可以更改图像或文本，但不能同时更改两者。如果有人能给我指出正确的方向，并告诉我我的代码哪里出错了，我将不胜感激。代码如下： Javascript function swapImage(){ var image = document.getElementById("imageToSwap"); var dropd = document.getElementById

我对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;
    }
}

<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>

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-->

A6 Loren ipsum dolor sit ame 这是一个非常重要的问题

下拉列表

<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>


A4
A6
A8

您可以使用为任何元素指定多个值

使用数据属性将“标题、说明、图像url”分配给每个选择选项（在您的情况下），并从

javascript

中访问

onChange

事件的

下拉列表
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>


A4
A6
A8

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;
    }
}

<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>


函数swapImage（）{
var image=document.getElementById（“imageToSwap”）；
var dropd=document.getElementById（“swapImg”）；
image.src=dropd.value；
//获取选定选项
var option=dropd.options[dropd.selectedIndex]；
//获取选项的数据集（使用数据属性定义）
var data=option.dataset；
//访问数据属性值
console.log（data.model）；
控制台日志（数据标题）；
console.log（data.description）；
var模型=document.getElementById（“模型”）；
var heading=document.getElementById（“heading3”）；
var textgree=document.getElementById（“textgree”）；
model.innedHTML=data.model；
heading.innedHTML=data.heading；
textgree.innedHTML=data.description；
}

演示
参考：



可以使用为任何图元指定多个值
使用数据属性将“标题、说明、图像url”分配给每个选择选项（在您的情况下），并从javascript
中访问onChange
事件的下拉列表
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>


A4
A6
A8

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;
    }
}

<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>


函数swapImage（）{
var image=document.getElementById（“imageToSwap”）；
var dropd=document.getElementById（“swapImg”）；
image.src=dropd.value；
//获取选定选项
var option=dropd.options[dropd.selectedIndex]；
//获取选项的数据集（使用数据属性定义）
var data=option.dataset；
//访问数据属性值
console.log（data.model）；
控制台日志（数据标题）；
console.log（data.description）；
var模型=document.getElementById（“模型”）；
var heading=document.getElementById（“heading3”）；
var textgree=document.getElementById（“textgree”）；
model.innedHTML=data.model；
heading.innedHTML=data.heading；
textgree.innedHTML=data.description；
}

演示
参考：



尝试使用FireBug调试代码。使用Chrome或Mozilla按F12-这将显示FireBug窗口，您可以调试代码。
尝试使用FireBug调试代码。使用Chrome或Mozilla按F12键-这将显示Firebug窗口，您可以调试代码。
在
 <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>

您丢失了

在您的
 <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>

您丢失了

非常感谢您的回答，我会尝试一下，让您知道这将是我第一次使用HTML5，因此我需要阅读一些内容，图像在变化，但文本没有变化。我是否需要在某个地方添加代码，我是否遗漏了什么？谢谢你的帮助非常感谢你的回答我会尝试一下，让你知道这将是我第一次使用HTML5，所以我有一点阅读要做，图像在变化，但文本没有变化。我是否需要在某个地方添加代码，我是否遗漏了什么？谢谢你的帮助