ClojureScript更改显示不可见

Question

我想利用clojurescript / javascript互操作来修改单击按钮时表的可见性。

我尝试过

{:on-click #(-> js/document                                               
 (.getElementById "db-search-result-tables")                                               
 (.-style)
 (.-display "block"))}

这是我正在调用的div标签。

[:div {:style {
       :display "none"}
       :id "db-search-result-tables"
        :class "db-search-results-table"}
[table-to-display]

我也尝试过

(-> js/document                                               
 (.getElementById "db-search-result-tables")                                                
 (.-style)
 (.-display)
  (set! ""))

但是它只是暂时显示表，然后再次将显示设置为无。

Answer 1

编辑：该解决方案不使用任何库，这是基于以下阅读：问题陈述没有明确提及任何库/框架，只是JS互操作，直接通过jQuery修改了DOM 。如果您使用任何库或任何React包装器（例如试剂），请不要使用此答案。

---

也许创建一个辅助功能（例如toggle会更容易），该功能通过ID隐藏/显示给定元素的显示？

(ns myproject.core)

(defn ^:export toggle [elem-id]
  (let [elem        (js/document.getElementById elem-id)
        style       (.-style elem)
        display     (.-display style)
        new-display (if (= "none" display) "block" "none")]
    (set! (.-display style) new-display)))

我们通过其ID查找元素，使用var获取当前样式，从该样式中获取显示并计算display属性的新值，然后set!将其返回显示。

我使用了^:export元数据标记，以便可以直接从文档中调用该函数，如下所示：

    <div>
      <button onClick="myproject.core.toggle('details')">Toggle details</button>
    </div>

    <div id="details" style="display: none">
      Some details here. Some details here. Some details here. Some details here. 
    </div>

Answer 2

这是特定于重新构图的解决方案。我建议利用 def game_detail(request,tournamentslug,lolslug,gameslug): game = get_object_or_404( LeagueofLegendsGame, tournament__tournament_slug=tournamentslug, lol_slug=lolslug, tournament__game__slug=gameslug ) context={ 'game':game, } return render(request,'esports/lolgame.html',context) 来存储状态，用app-db来改变状态，而用handler来获取当前值。 Re-frame的README是学习此设置的好资源：https://github.com/Day8/re-frame

对DOM的直接更改将在其认为合适时被重新构架覆盖（这就是为什么将原始代码恢复为原始组件定义的原因）。

设置订阅/处理程序

您可以这样创建sub：

handler

和一个(re-frame.core/reg-event-fx :handlers/enable-search-results (fn [{:keys [db]} _] {:db (assoc db :show-search-results? true}) 来检索值：

sub

更新代码以使用subs / handlers

现在，更新您的搜索按钮以将其发送到(re-frame.core/reg-sub :subs/show-search-results? (fn [db] (:show-search-results? db)) ：

handler

并根据[:button {:on-click #(re-frame.core/dispatch [:handlers/enable-search-results])} "Click to show search results"] 将搜索结果div更新为可见/隐藏：

sub

或者：

(let [show-search-results? @(re-frame.core/subscribe [:subs/show-search-results?])]
  [:div {:style {:display (if show-search-results? "visible" "none"}
         :id "db-search-result-tables"
         :class "db-search-results-table"}
  [table-to-display]])

由于(let [show-search-results? @(re-frame.core/subscribe [:subs/show-search-results?])] (when show-search-results? [:div {:id "db-search-result-tables" :class "db-search-results-table"} [table-to-display]])) 状态是持久的，因此正是这样的“突变”可以安全控制的地方。