Подключение изображения из imgArray для выбора - PullRequest
Новая
       1

Подключение изображения из imgArray для выбора

0 голосов
/ 23 июня 2018

Я строю небольшой проект Js, в котором вы можете выбрать 2 типа мотоциклов и 3 типа погоды, и в зависимости от вашего выбора вы получите уличные и зимние шины. Но сейчас я пытаюсь подключить изображение к опции с помощью imgArray, но не могу понять, как это сделать. Прямо сейчас я использую onchange в html, я должен сделать это с помощью eventlisterner, но у меня не получилось. Вот мой код

HTML: 

<select id="motor" onchange="selectBike()">
    <option value="Allroad">Allroad</option>
    <option value="Street">Street</option>
</select>

Js 

var imgArray2 = ['KTM790', "KTM790D"];

document.querySelector("img").src = 'Bike/' + imgArray2

function selectBike() {
    var x = document.getElementById('motor').value;

    document.getElementById("demo").innerHTML =
        "you selected " + x;
}

function selectWeather() {
    var c = document.getElementById('weather').value;

    document.getElementById("demo2").innerHTML = "it's " + c;
}

Ответы [ 3 ]

0 голосов
/ 23 июня 2018

В моем случае, вы можете создать объект JSON и сохранить данные изображения в объект Array.Когда вы добавляете данные изображения, вы должны конвертировать изображение в формат base64. вот ссылка .Вот мое решение 

<html>
    <head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
<body>

    <select id="bikes" onchange="selBike()">
        <option >Allroad</option>
        <option >Street</option>
    </select>

    <div id="demo"></div>
    <div id="demo1"></div>

    <script>


    var imgBikes = [{"imgURL" : "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAGAAYAMBIgACEQEDEQH/xAAcAAEAAQUBAQAAAAAAAAAAAAAACAMEBQYHAQL/xAA7EAABAwMCAwMICAYDAAAAAAABAAIDBAURBhITITEHQVEUIlRhcXSUshYXMzVikbHRI1JVcoGhFTI0/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AO4oiICIiAiIgIiICIiAiIgIiICLxzgxpc4gNAySTyAWN+kNk/rFu+KZ+6ClqvUFJpiyT3Sta97I8NZHGPOkeeQaP3WjR2XWerqKlv8AS6xNtZWxNljoYIHBkLTzA3B3nHxJHP2cl8dt90t9bo+GKiuFLO8V0biyGZrjja/uB9iz3ZzfbTFoeyQ1F0oopo6RjHxvqGNc0jlzBPJBhm1+oezqWkn1bfWXi01tQKdz+GWyUrtrjv8AxNw05GfWPA9NY9sjGvY4Oa4ZBByCFyLt6ulFW6ftkNFWU9Q7y3e7gytfgCN47j+JdC01dKH6O2sSV1MHijh3AzNyDsGe9BnUVtHcaGR4ZHWU7nOOA1srST/tXKAiIgIioSVG2QjHRBTuxxa6w+ED/lKiFC1vAZyH/UfopaXWcutlY04A4EmT6tpUd6bRTxGfKK4bA1zGPZGeTgcNJz1HIkgfn1wGrBo7gAvNozkjJWzx6OqeXFq4o8lrWkxuIcXcMDB7xulAz+Eq9s2gZLla6OufcxTGpaTwX0pJYRuyD5w/ld3eHjyDTNo7hhfHBiJJMbCT3lq6BN2by0vAfPcd7HSMbI1sGzzS4NO1xJyefeFj5NGOfHSvpagtMn2geNw6OPmnAycN6deaDG6EYxutrEQxoIrosED8QUqlHzTWkZaDVlmnFQHCCaN8wLTzc0s3bOmW5d/hd8dUtDsAZ9eUFdFQbUBzg3b19aroC+XMa8YcMr6RBZXhoForuQ/88nylRFjcTG05PTxUur19z13u8nylREi+yZ/aEGStNvfcjXhk/C8joJq05bu38PB29RjOevPHgt00hBcG6bgraOuo2z8KbgU09M92WRTYe4vDwAc1JAG08sd/Na/oSmnray90tJE6aomsdWyONgyXOOwABbnpa31dDpinNbTvgFJDXw1Jk5cJ7qimLWu8CQCQgpX6xvvdRDR1F/o201E6RglgoH74pOO2nMZYZScFxb5xPRufFc1roH0VfVUkj976ad8JcOhLXFpI/JdrqbdUuuEsHkbRXyzSzFjI2te+Jtzjc15x1GwZye5ca1C4O1Fd3NIINfUEEd/8VyDI6DJdraxEkk+Wx9T61KbaPBRY0Bz1vYvfY/1UqEHmAvURAREQWV6+5q/3aT5SoiR/Zt9gUur59y1/u0nylRGYf4bfYEBzA4YcAR4ELo9tsVm+jVnqv+MikqKianime6m38ncLd38hhxO7uz0XOcqtHV1cTdsVVOxuMbWyuAx4Yz6h+SDZNfW+3UfksdDbY6dpfKJCKXZvc2RzMh248jtJDe4YOea1TGByVWWpqJY2xy1EsjGnLWPeSAfEAqkg2Ds+565sXvjFKdRZ7POeurF7439CpTICIiAiIgtbrC+otlXBEMySQPY0ZxklpAUe29k2sNgBoqbIHpTVI5EEcvql1f6HTfFNXv1Sav8ARKX4pqkYiCOf1Sav9Epfimp9Uer/AEWk+KH7KRiIOGaO7MtTWrVNruFbBStp6acSSFtQHHGD0GF3NEQEREH/2Q=="},{"imgURL":"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAP//////////////////////////////////////////////////////////////////////////////////////2wBDAf//////////////////////////////////////////////////////////////////////////////////////wAARCADqATkDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAECA//EACQQAQEBAAIBBAMBAQEBAAAAAAABESExQQISUXFhgZGxocHw/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/xAAWEQEBAQAAAAAAAAAAAAAAAAAAEQH/2gAMAwEAAhEDEQA/AMriLyCKgg1gQwCgs4FTMOdutepjQak+FzMSVqgxZdRdPPIIvH5WzzGdBriphtTeAXg2ZjKA1pqKDUGZca3foBek8gFv8Ie3fKdA1qb8s7hoL6eLVt51FsAnql3Ut1M7AWbflLMDkEMX/F6/YjK/pADFQAUNA6alYagKk72m/j9p4Bq2fDDSYKLNXPNLoHE/NT6RYC31cJxZ3yWVM+aBYi/S2ZgiAsnYJx5D21vPmqrm3PTfpQQwyAC8JZvSKDni41ZrMuUVVl+Uz9w9v/1QWrZsZ5nFPHYH+JZyureQSF5M+fJ0CAfwRAVRBQA1DAWVUayoJUWoDpsxntPsueBV4+VxhdyAtv8AjOLGpIDMLbeGvbF4iozJfr/WukAVABAXAQXEAAASzVAZdO2WNordm+emFl7XcQSNZiFtv0C9w90nhJf4mA1u+GcJFwIyAqL/AOovwgGNfSRqdIrNa29M0gKCAojU9PAMjWXpckEJFNFEAAXEUBABYz6rZ0ureQc9vyt9XxDF2QAXtABcQAs0AZywkvluJbyipifas52DcyxjlZweAO0xri/hc+wZOEKIu6nSyeToVZyWXwvCg53gW81QQ7aTNAn5dGZJPs1UXURQAUEMCXQLZE93PRZ5hPTgNMrbIzKCm52LZwCs+2M8w2g3sjPuZAXb4IsMAUACzVUGM4/K+md6vEXUUyM5PDR0IxYe6ramih0VNBrS4xoqN8Q1BFQk3yqyAsioioAAKgDSJL4/jQIn5igLrPqtOuf6oOaxbMoAltUAhhIoJiiggrPu+AaOIxtAX3JbaAIaLwi4t9X4T3fg2AFtqcrUUarP20zUDAmqoE0WRBZPNVUVEAAAAVAC8kvih2DSKxOdBqs7Z0l0gI0mKAC4AuHE7ZtBriM+744QAAAAABAFsveIttBICyaikvy1+r/Cen5rWQHIBQa4rIDRqSl5qDWqziqgAAAATA7BpGdqXb2C2+J/UgAtRQBSQtkBWb6vhLbQAAAAAEBRAAAAAUbm+GZNdPxAP+ql2Tjwx7/wIgZ8iKvBk+CJoCXii9gaqZ/qqihAAAEVABGkBFUwBftNkZ3QW34QAAABFAQAVAAAAAARVkl8gs/43sk1jL45LvHArepk+E9XTG35oLqsmIKmLAEygKg0y1AFQBUXwgAAAoBC34S3UAAABAVAAAAAABAUQAVABdRQa1PcYyit2z58M8C4ouM2NXpOEGeWtNZUatiAIoAKIoCoAoG4C9MW6dgIoAIAAAAAAACKWAgL0CAAAALiANCKioNLgM1CrLihmTafkt1EF3SZ5ZVUW4mnIKvAi5fhEURVDWVQBRAAAAAAAAQFRVyAyulgAqCKlF8IqLsEgC9mGoC+IusqCrv5ZEUVOk1RuJfwSLOOkGFi4XPCoYYrNiKauosBGi9ICstM1UAAAAAAFQ0VcTBAXUGgIqGoKhKAzRRUQUAwxoSrGRpkQA/qiosOL9oJptMRRVZa0VUqSiChE6BqMgCwqKqIogAIAqKCKgKoogg0lBFuIKgAAAKNRlf2gqsftsEtZWoAAqAACKoMqAAeSoqp39kL2AqLOlE8rEBFQARYALhigrNC9gGmooLp4TweEQFFBFAECgIoAu0ifIAqAAA//9k="}];





    function selBike(){
        var getVal = $('#bikes').val();


        if(getVal == "Allroad"){

            $('#demo').empty();

            var imgTag = $("<img src='"+ imgBikes[0].imgURL +"'></img>");

            $('#demo1').append(imgTag);
        }
        else{

            $('#demo').empty();

            var imgTag = $("<img src='"+ imgBikes[1].imgURL +"'></img>");

            $('#demo').append(imgTag);

        }

    }




    </script>

</body>
</html>

Таким образом, вам не нужно хранить изображения в вашем каталоге.Потому что данные изображения теперь закодированы.Так что мне плевать на мои изображения ...

Спасибо !!!

0 голосов
/ 23 июня 2018

Я изменил бит вашего кода, чтобы сделать его, как вы ожидали.

HTML:

  • добавил ссылку «this» для вызова события «selectBike» для доступавыберите элемент управления в функции обратного вызова события.

JS:

  • по умолчанию image src соответствует первому индексу заданного массива ссылок изображений imgArray2.
  • с помощью«this» ссылка, которая передается в качестве аргумента, мы можем получить доступ к selectedIndex и можем соответствующим образом изменить источник изображения. 

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var imgArray2 = ['KTM790', "KTM790D"];
    //by default
    document.querySelector("img").src = 'Bike/' + imgArray2[0];
    
    function selectBike(selectRef) { var x = document.getElementById('motor').value;
      document.getElementById("demo").innerHTML = "you selected " + x;
      document.querySelector("img").src = 'Bike/' + imgArray2[selectRef.selectedIndex];
    }
    
    function selectWeather() { var c = document.getElementById('weather').value;
      document.getElementById("demo2").innerHTML = "it's " + c;
    }</code>
<select id="motor" onchange="selectBike(this)">
    <option value="Allroad">Allroad</option>
    <option value="Street">Street</option>
</select>

<div id="demo"></div>
<img src="" alt="">
0 голосов
/ 23 июня 2018

Вам нужно иметь imgObjects, который имеет значения и название изображения тогда вы можете использовать этот код, который создаст элемент изображения и добавит его 

var imgObjects =  {
Allroad : "KTM790D",
Street : "KTM790"
}

function selectBike() {
    var x = document.getElementById('motor').value;
    document.getElementById("demo").innerHTML =
        "you selected " + x;
  var imgElm =   document.createElement("img");
  imgElm.src = window.location.hostname + "/Bikes/" + imgObjects[x]+".jpg";
console.log(imgElm)
      document.getElementById("demo").appendChild(imgElm);  
}
<select id="motor" onchange="selectBike()">
    <option value="Allroad">Allroad</option>
    <option value="Street">Street</option>
</select>


<p id="demo"></p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...