javascript - 使用jquery从json更改img src

Question

我有一个包含此数据的 JSON 文件(忽略内容):

[{
    "autonomia_id": "01",
    "nombre": "Andalucía",
    "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Flag_of_Cambodia.svg/200px-Flag_of_Cambodia.svg.png"
},
{
    "autonomia_id": "02",
    "nombre": "Aragón",
    "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Flag_of_Cambodia.svg/200px-Flag_of_Cambodia.svg.png"
},
{
    "autonomia_id": "03",
    "nombre": "Asturias, Principado de",
    "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Flag_of_Cambodia.svg/200px-Flag_of_Cambodia.svg.png"
}]

我想根据您在选择时选择的内容更改 html 上的 img src。

<!-- MODAL SELECCION COMUNIDAD AUTONOMA -->
<div id="modal" class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Selecciona la comunidad autónoma desde la que visitas esta web</h4>
        </div>
        <div class="modal-body">
            <select class="form-control" id="comunidades">
          <option selected value="0">Selecciona una comunidad autónoma...</option>
      </select>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn-lg btn-info" id="aceptar">Aceptar</button>
        </div>
    </div>

</div>
<!-- /MODAL SELECCION COMUNIDAD AUTONOMA/ -->



<!-- MOSTRAR COMUNIDAD -->
<div id="comunidadRepresentando" class="media">
    <div class="media-left">
        <img id="imgComunidad" class="media-object" src="src/imgcomunidad.png" alt="comunidad">
    </div>
    <div class="media-body">
        <h3 id="nombreComunidad" class="media-heading">Nombre comunidad</h3>
        <p id="descripcionComunidad">Si quieres ver una pequeña descripción de un comunidad autónoma, selecciónala en el panel de al lado.</p>
    </div>
</div>

使用 jquery 或纯 JavaScript 可以做什么？

我尝试过使用 .text() 一次，但它只显示名称，而不显示 img url。

编辑 添加一些 javascript 和 jquery 代码:

这将我的 json 的“nombre”字段正确地放在#nombreComunidad

function ponerNombreComunidad() {
    $("#comunidades")
        .change(function () {
            var str = "";
            $("select option:selected").each(function () {
                str += JSON.parse();
            });
            $("#nombreComunidad").text(str);
        })
        .trigger("change");
}

但这并没有给我正确的 img src:

function cambiarImgComunidad() {

     $("#comunidades")
            .change(function () {


                var str = "";
                $("select option:selected").each(function () {
                    str += $(this).text();
                });
                $("#imgComunidad").attr("src", str);
            })
            .trigger("change");
    }

Answer 1

var json = [{"autonomia_id": "01","nombre": "Andalucía","img": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Flag_of_Cambodia.svg/200px-Flag_of_Cambodia.svg.png"}, {"autonomia_id": "02","nombre": "Aragón","img": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Flag_of_Cambodia.svg/200px-Flag_of_Cambodia.svg.png"}, {"autonomia_id": "03","nombre": "Asturias, Principado de","img": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Flag_of_Cambodia.svg/200px-Flag_of_Cambodia.svg.png"}],
    selectOptions = '';

// Create the select options
json.forEach(function (el) {
  selectOptions += '<option value="' + el.autonomia_id + '">' + el.nombre + '</option>';
});

// Populate select and set event handler
$('#comunidades')
  .append(selectOptions)
  .on('change', function(event) {
    // find selected element by "autonomia_id"
    var selectedEl = json.find(function (el) {
      return event.target.value === el.autonomia_id;
    });
    
    if (selectedEl) {
      $('#nombreComunidad').text(selectedEl.nombre);
      $('#descripcionComunidad').text('Description goes here...');
      $('#imgComunidad').attr('src', selectedEl.img);
    }
  });

#selectedComunidad {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- MODAL SELECCION COMUNIDAD AUTONOMA -->
<div id="modal" class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Selecciona la comunidad autónoma desde la que visitas esta web</h4>
    </div>
    <div class="modal-body">
      <select class="form-control" id="comunidades">
          <option selected value="0">Selecciona una comunidad autónoma...</option>
      </select>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn-lg btn-info" id="aceptar">Aceptar</button>
    </div>
  </div>
</div>
<!-- /MODAL SELECCION COMUNIDAD AUTONOMA/ -->



<!-- MOSTRAR COMUNIDAD -->
<div id="comunidadRepresentando" class="media">
  <div class="media-body">
    <h3 id="nombreComunidad" class="media-heading">Nombre comunidad</h3>
    <p id="descripcionComunidad">Si quieres ver una pequeña descripción de un comunidad autónoma, selecciónala en el panel de al lado.</p>
    <div class="media-left">
      <img id="imgComunidad" class="media-object" alt="comunidad">
    </div>
  </div>
</div>

请注意，所有标志都是相同的。您还可以在 json 中添加 descripcionComunidad。希望对您有帮助!