Question

有人可以告诉我我的代码有什么问题吗，每当我通过自己创建的分页导航到另一个页面并返回上一页时，我已经点击了一个按钮（点击按钮会有一些提示＆＃39 ; btn-success和一个选中的图标），我点击的按钮将是默认的btn-primary。现在，每当我浏览不同的页面时，我想在btn-success上保持点击按钮的样式。谢谢。

for(var isbnCount=0; isbnCount<isbnsplitted.length; isbnCount++){
    if(value.ISBN==isbnsplitted[isbnCount]){
        console.log("true: "+isbnsplitted[isbnCount]);          
        checkBox='<td id="buttons">'+
                    '<input type="hidden" id="'+value.ISBN+value.Title+'">'+
                    '<button type="button" class="button btn btn-success" name="'+value.ISBN+'" id="'+value.ISBN+'" value="'+value.Title+'"><i class="material-icons">check</i></button>'+
                '</td>';
    }
    else{
        console.log("false");
        checkBox='<td id="buttons">'+
                        '<input type="hidden" id="'+value.ISBN+value.Title+'">'+
                        '<button type="button" class="button btn btn-primary" name="'+value.ISBN+'" id="'+value.ISBN+'" value="'+value.Title+'"><i class="material-icons">library_add</i></button>'+
                  '</td>';
    }
}   
}               
bookCards='<tr id="tableRow">'+
            '<td id="title">'+value.Title+'</td>'+
            '<td id="author">'+value.Author+'</td>'+
            '<td id="author">'+value.Category+'</td>'+
            status+
            checkBox+
      '</tr>';
$('#tableBody').append(bookCards);

我顺便从我的服务器端加载了一组新的数据，AJAX代码就在那段代码之上。

Answer 1

在这种情况下，我想推荐使用Redux（只是把它放在那里）。我现在在一些小应用程序上一直在修补JQuery和Redux，它们在一起工作得非常好。

Redux可以存储所有用户设置等，并且可以解决围绕jQuery函数传递变量的复杂性。但是，与存储变量等相比，Redux存储可以轻松地持久化和重新加载。我有一个JsBin工作示例here，它存储和重新加载Redux存储。

// Reducer - takes the action types and reduces them into a new state condition.
const text = (state = {}, actions) =>{
  switch (actions.type) {
    case 'UPDATE_TEXT': return Object.assign({}, state, {value: actions.value})
    default: return state
  }  
}

// Store to hold state of the app - only one store but many properties. 
const updateText = Redux.createStore(text);


//Use subscribe() to update the UI in response to state changes.
updateText.subscribe(() => {
  let text = updateText.getState().value
  localStorage.setItem("text",text)
  $('#display').text(text)
});


// The only way to mutate the internal state is to dispatch an action.
// Dispatch = "Please dispatch this change, please"
$('#square').on('keyup',(e) => updateText.dispatch({type:'UPDATE_TEXT','value':e.target.value}))

$(document).ready(()=>{
  console.log('working')
  let text = localStorage.getItem("text")
  updateText.dispatch({type:'UPDATE_TEXT','value':text})
})

如果条件满足jquery，则更改动态创建的按钮样式

1 个答案: