Je dois afficher le nom de "choisir une marque" dans un div ("marque choisie") après avoir sélectionné le menu et en même temps modifier l'image d'arrière-plan du site également. Ainsi, si quelqu'un clique sur une marque comme BMW, il doit afficher le nom "BMW" dans la division "marque choisie" et modifier l'image d'arrière-plan du site Web.

Par exemple, veuillez consulter le site : Car select

J'utilise le script suivant pour remplir les options de sélection

var selectData = {

  "bmw": {

    "1": "316i",
    "100": "520i",
    "101": "740i"

  },
  "audi": {
    "2": "Audi A4",
    "200": "AudiA6",
    "201": "AudiA8"

  },
  "mercedes": {

    "3": "A 180",
    "300": "E 320",
    "301": "S 500"

  },

};
jQuery(document).ready(function($) {
  $(document).on('click', '.specialLink', function(event) {

    var radio2 = document.getElementById('radio2');
    if (radio2.checked == false) {
      radio2.checked = true;
      toggleRadio();
    }

    event.preventDefault();
    var b = $(this),
      buttonId = b.attr('id'),
      selectSet = selectData[buttonId],
      selectField = $('#specialLink');
    selectField.empty();
    if (selectSet) {
      $.each(selectSet, function(k, v) {
        selectField.append($('<option>', {
          value: k,
          text: v
        }));
      });
    }
    return false;
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Et pour basculer ce script

function toggleRadio() { // will activate when the form will change.
  var radio1 = document.getElementById('radio1'); // radio 1
  var radio2 = document.getElementById('radio2'); // radio 2
  if (radio1.checked == true) { // if the first checked display input and hide select
    document.getElementById('textLabel').style.display = 'block';
    document.getElementById('selectLabel').style.display = 'none';
    document.getElementById('specialLink').value = ''; // clear selected option
  } else { // because i got only 2 option i don't have to use another condition
    document.getElementById('textLabel').style.display = 'none';
    document.getElementById('selectLabel').style.display = 'block';
    document.getElementById('textin').value = ''; // clear input
  }
}
toggleRadio(); // call the function
0
bruno2000 17 mars 2019 à 19:07

2 réponses

Meilleure réponse

J'ai apporté quelques modifications au code ci-dessus pour obtenir le résultat souhaité. Comme vous pouvez le voir, j'ai ajouté un index d'image dans l'objet selectedData en haut juste pour obtenir l'image d'arrière-plan respective d'une marque. J'ai également mentionné les changements de code dans les commentaires.

var selectData = {

  "bmw":{

        "1":"316i",
         "100":"520i",
          "101":"740i",
          "image":"https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg"
  },
  "audi":{
    "2":"Audi A4",
    "200":"AudiA6",
     "201":"AudiA8",
     "image":"https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg"

  },
   "mercedes":{

         "3":"A 180",
         "300":"E 320",
          "301":"S 500",
          "image":"https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg"

  },

 };
    jQuery(document).ready(function($) {
      $(document).on('click', '.specialLink', function(event) {
        var radio2 = document.getElementById('radio2');
        if (radio2.checked == false) {
          radio2.checked = true;
          toggleRadio();
        }
        $(".brand").html($(this).text());
        event.preventDefault();
        var b = $(this),
        background_image = '';
          buttonId = b.attr('id'),
          selectSet = selectData[buttonId],
          selectField = $('#specialLink');
        selectField.empty();
        //To change the background image of website
        $("#banner").css('background','url("'+selectSet.image+'")');
        if (selectSet) {
        //Remove imgae index form selectSet
         $.each(selectSet, function(k, v) {
        if(typeof k === 'string' && k === 'image') {
        return true; } selectField.append($('<option>', 
        { value: k, text: v })); 
        });
        }
        return false;
      });
    });
2
bruno2000 18 mars 2019 à 09:55

Pour modifier le texte, définissez le .textContent du ""Marque choisie""-div dans votre gestionnaire de clics sur ".specialLink" sur $(this).text().

Pour changer la couleur, vous pouvez définir element.style.background de votre élément cible sur la couleur souhaitée, encore une fois dans votre gestionnaire de clics.

0
Andre Nuechter 17 mars 2019 à 16:35