Question

我正在尝试在我的Web应用程序中构建一个按钮以切换元素，但我希望按钮中的文本也会根据应该执行的操作而更改！

以下是代码：

＆＃13;

$(".hideLink").on("click", function(){
    if($(this).text()=="Hide Products - ")
    {
        $(this).text("Show Products - ");
    } else {
        $(this).text("Hide Products - ");
    }
    $(".ISProductBody").toggle(); 
        
    return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ISBody">
     <h5>Header</h5>
     <div class="ISTopLink"><a href="#ISTop">Return to Top</div>
     <div class="ISHide"><a href="#" class="hideLink">Hide Products - </a></div>
     <hr>
     <div id="pos" style="display: block;">
      <div class="ISProductBody">
       <div class="ISSubHead"><A HREF="#">Prodcut Name</A></div>
      <div class="ISList">
       <ul>
        <li>Text here</li>
        <li>Text here</li>
        <li>Text here</li>
        <li>Text here</li>
      </ul>
      </div>
    </div>
    </div>

＆＃13;

我想在页面刷新时保留更改，以便它不会返回到先前的状态。因此，它可以保存元素是隐藏还是显示，以及按钮点击时要执行的操作！

我非常感谢每一个提示或解决方案！干杯！

Answer 1

我认为也许您不需要保存文本，只需保存状态（如果显示或隐藏）就足够了。因为当您从localStorage检索状态时，您可以检查它，然后定义要显示的文本。

如果您确实要保存文本，请继续按照下面的代码段中使用的相同逻辑保存状态，并使用它保存文本。

OBS ：在我的代码中，我的代码无法正常工作，它不允许从代码段中使用localStorage，在此处尝试，然后告诉我它是否适合您。

的修改
当页面加载时，它会尝试查找locaStorage，如果找到，则会根据需要进行更改。工作小提琴：http://jsfiddle.net/mk96wrvq/

＆＃13;

$(document).ready(function(){
  var actualState = localStorage.getItem('state');
  var btnJQ = $('.hideLink');  
  if (actualState != null){
    var myText = "";
    if (actualState == 'showing'){
      myText = "Hide Products";
    }else{
      myText = "Show Products";
      $(".ISProductBody").toggle(); 
    }       
    btnJQ.text(myText);
  }
  
  $(".hideLink").on("click", function(){
  var _thisJQ = $(this);
  if(_thisJQ.text() == "Show Products"){
      localStorage.setItem('state', 'showing');  
      _thisJQ.text("Hide Products"); 
      
  } else if (_thisJQ.text() == "Hide Products") {
    localStorage.setItem('state', 'hidden');  			            
    _thisJQ.text("Show Products");  
  }
  
  $(".ISProductBody").toggle(); 
});
  
});

＆＃13;

    <div class="ISBody">
     <h5>Header</h5>
     <div class="ISTopLink"><a href="#ISTop">Return to Top</a></div>
     <div class="ISHide"><a href="#" class="hideLink">Hide Products - </a></div>
     <hr>
     <div id="pos" style="display: block;">
      <div class="ISProductBody">
       <div class="ISSubHead"><A HREF="#">Prodcut Name</A></div>
      <div class="ISList">
       <ul>
        <li>Text here</li>
        <li>Text here</li>
        <li>Text here</li>
        <li>Text here</li>
      </ul>
      </div>
    </div>
    </div>

＆＃13;

将更改的文本保存到按钮上切换localStorage Javascript中的元素

1 个答案: