Блог

Главная - Вопросы по программированию - Javascript; Удаление определенного изображения без соответствия в HTML

Javascript; Удаление определенного изображения без соответствия в HTML

#javascript

#javascript

Вопрос:

Имея этот код, и я не совсем уверен, как удалить (удалить) два конкретных изображения. Фон позади; Функция » $(«img»).each(function() { $(«img»).remove();

})» удаляет все изображения с сайтов после запуска события (нажатие кнопки) . Итак, я попытался присвоить им идентификатор, что я и сделал, но на самом деле не знаю, какой код удалит их конкретно и заставит их снова появиться при повторном нажатии кнопки.

  • Смысл кода совершенно очевиден; это грамматическое упражнение, которое указывает, когда это неправильно или правильно.

Jsfiddle: http://jsfiddle.net/angelsmall13/v1x2ocat/5 /

Сокращено ниже.

 function clearAnswers() {
  $("img").each(function() {
    $(this).remove();
    markCorrect.calls = 0;
    markIncorrect.calls = 0;
  })
}

function markIncorrect(el) {
  var img = new Image();
  img.src = 'https://i.ibb.co/XWSYMSg/wrong.jpg';
  img.id = "logoGear"; 
  el.append(img);
  markIncorrect.calls  ;
}

markIncorrect.calls = 0;

function markCorrect(el) {
  var img = new Image();
  img.src = 'https://i.ibb.co/4JKs8RV/check.jpg';
  el.append(img);
  img.id = "logoGear2"; 
  markCorrect.calls  ;
}

markCorrect.calls = 0;

$("form").on("submit", function(e) {
  e.preventDefault();
  clearAnswers();

  $questions = $(".question");
  $questions.each(function() {
    var answer = $(this).find("input:checked"),
      key = answer.attr("name"),
      val = answer.attr("value");

    if (answer.length === 0) {
      markIncorrect($(this).find("p"));
    } else if (answers[key] !== val) {
      markIncorrect($(this).find("p"));
    } else {
      markCorrect(answer.parent());
    }
  });

  $("#score-card").html(`<p>Score: ${markCorrect.calls} / ${markCorrect.calls   markIncorrect.calls}</p>`);
})

var answers = {
  "one": "a",
  "two": "b"
}

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }

}

function myf2() {
  $("#score-card").html(`Your score will be displayed here`);
  document.getElementById("myForm").reset();
  markCorrect.calls = 0;
  markIncorrect.calls = 0;
  document.getElementById("myDIV").style.display = "none";
  $("img").each(function() {
    $("img").remove();

  })


  if (frm_elements[i].checked) {
    frm_elements[i].checked = false;
  }

}  
 body {
  max-width: 960px;
  margin: 0 auto;
  color: #42445a;
  display: center;
  font-family: 'Ubuntu', sans-serif;
}

@import url
("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300amp;display=swap");
label{ display: block; }
input[type=submit]{ margin-top: 15px; }

#score-card{
  color: black;
  font-weight: bold;
}
input {
    background-color: darkgreen; /* Green */
        border-radius: 50px;
    border: none;
    color: white;
    padding: 13px 50px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
input:hover  {
    background-color: green; /* Green */
        border-radius: 50px;
    border: none;
    color: white;
    padding: 13px 50px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;}
    #myDIV{
  display: center;
    width: 600px;
  height: 300px;
  background-color: lightgreen;
  text-align: left;
   margin: auto;
     padding: 22px;
    animation: fadein 2s;

}  
 <form id="myForm">
    <div class="question">
        <p><strong>Q1</strong>: Mary is English. She was born in London</p>
        <label>
            <input type="radio" name="one" value="a">Mary was born in England</label>
        <label>
            <input type="radio" name="one" value="b">Mary, who is English, was born in London</label>
        <label>
            <input type="radio" name="one" value="c">English Mary was born in London</label>
        <label>
            <input type="radio" name="one" value="d">London Mary is English born</label>
    </div>
    <div class="question">
        <p><strong>Q2</strong>: Mary is English. She was born in London</p>
        <label>
            <input type="radio" name="two" value="a">Mary was born in England</label>
        <label>
            <input type="radio" name="two" value="b">Mary, who is English, was born in London</label>
        <label>
            <input type="radio" name="two" value="c">English Mary was born in London   </label>
        <label>
            <input type="radio" name="two" value="d">London Mary is English born</label>
    </div>
          <input type="submit" onclick="myFunction()" value="Check!" />
      <input type="button" id="rese" onclick="myf2()" value="Try again!">

    <div  id="myDIV" style=display:none  >    <div id="score-card">

    </div></div>
</form>

Ответ №1:

Заменить $("img").remove(); на $(this).remove(); where this является объектом jquery в этом контексте