Question

enter image description here

每当＆＃34;保存＆＃34;单击按钮，输入元素的值将保存在本地存储中，以便在重新加载页面时，页面的状态为＆＃34;可以恢复（包括输入元素的值，所选动物的图像，<div id="title">和<div id="description">中的值。

我在W3School尝试过这种方式，但不知何故它没有用。重新加载后页面将刷新。

html如下所示：

</head>
<body>

<form>
  <div>
    <input name="title" id="title1"  placeholder="Title ..." value="">
  </div>

  <div>
    <label for="fruit">Animal choice: </label>
    <input type="radio" name="animal" value="wolf" checked> Wolf
    <input type="radio" name="animal" value="lemur"> Lemur
    <input type="radio" name="animal" value="cat"> Cat
    <input type="radio" name="animal" value="raccoon"> Raccoon
  </div>

  <div>
    <textarea name="description" rows="6" cols="60" value=""
      placeholder="Description ..."></textarea>
  </div>


</form>
<div>
  <button id="save">Save</button>
  <button type="reset">Reset</button>
</div>
<hr>

<div>
  <h3 id=t1>Title ...</h3>
  <div><img id=animal_img src="img/wolf.jpg" alt="wolf"></div>
  <div id=description>Description ...</div>

  </div>

  <div id="result">...</div>






</body>
</html>

Answer 1

您可以使用侦听器检查收音机是否已更改，然后使用if检查值，然后定义图像，描述等... 在这里，我使用了一个非常基本的通用jQuery选择器input[type='radio']，如果需要，可以使用更具体的类。

有一个名为AdjustSelected的函数，它会进行所有调整，更改图像，标题等...您可以在页面加载时调用它，传递来自localStorage的值，以调整所有内容n加载页面。

AdjustSelected = function(valSelected){  
  if (valSelected == 'wolf'){
    $('#t1').text('The Wolf');
    $('#animal_img').attr('src', 'PATH_TO_IMAGE');   
    $('#animal_img').attr('alt', 'wolf');
    $('#description').text('TEXT_YOU_WANT');
    
  }else if (valSelected == 'lemur'){
    $('#t1').text('The Lemur');
    $('#animal_img').attr('src', 'PATH_TO_IMAGE');
    $('#animal_img').attr('alt', 'lemur');
    $('#description').text('TEXT_YOU_WANT');
    
  }else if (valSelected == 'cat'){
    $('#t1').text('The Cat');
    $('#animal_img').attr('src', 'PATH_TO_IMAGE');
    $('#animal_img').attr('alt', 'cat');
    $('#description').text('TEXT_YOU_WANT');
    
  }else if (valSelected == 'raccoon'){
    $('#t1').text('The Raccoon');
    $('#animal_img').attr('src', 'PATH_TO_IMAGE');
    $('#animal_img').attr('alt', 'raccoon');
    $('#description').text('TEXT_YOU_WANT');    
  }
};

$("input[type='radio']").on('change', function(){
  var valSelected = this.value;
  AdjustSelected(valSelected);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div>
    <input name="title" id="title1"  placeholder="Title ..." value=""/>
  </div>

  <div>
    <label for="animal" id='radioAnimals'>Animal choice: </label>
    <input type="radio" name="animal" value="wolf" checked> Wolf
    <input type="radio" name="animal" value="lemur"> Lemur
    <input type="radio" name="animal" value="cat"> Cat
    <input type="radio" name="animal" value="raccoon"> Raccoon
  </div>

  <div>
    <textarea name="description" rows="6" cols="60" value=""
      placeholder="Description ..."></textarea>
  </div>


</form>
<div>
  <button id="save">Save</button>
  <button type="reset">Reset</button>
</div>
<hr>

<div>
  <h3 id=t1>Title ...</h3>
  <div><img id=animal_img src="img/wolf.jpg" alt="wolf"></div>
  <div id=description>Description ...</div>

  </div>

  <div id="result">...</div>

Answer 2

我建议在顶部定义数据集，如下所示：

animals = { 
        wolf: { 
            title: 'The Wolf', 
            src: 'path_to_wolf_image', 
            desc: 'wolf description' 
        }, 
        lemur: { 
            title: 'The Lemur', 
            src: 'path_to_lemur_image', 
            desc: 'lemur desc' 
        }
    };

然后您可以在一个分配区中分配所有内容：

$("input[name='animal']").change(function(){
        var animal = animals[this.value];
        if (animal != undefined) {
            $('#title1').text(animal.title);
            $('#animal_img').attr('src', animal.src);   
            $('#animal_img').attr('alt', animal.title);
            $('#description').text(animal.desc);
        }
    });

Window.localStorage JavaScript

2 个答案: