非同期でデザインの切り替え

Question

###知りたいこと
ボタンを押すとページ全体の更新ではなく、ある部分だけデザインが変わる方法が知りたいです。
以下のようなコードで、design2のspanをクリックすると、design-twoのデザインに切り替わる方法はありますでしょうか？
参考になるサイトや検索すべきワードなどでもよろしいのでお教え頂ければ幸いです。

<span class="design1">デザイン１</span>
<span class="design2">デザイン２</span>
<% @posts.each do |post| %>
  <div class="design-one">
    <p><%= post.name %></p>
  </div
<% end %>

design2のspanをクリックすると以下に変更

  <div class="design-two">
    <p><%= post.name %></p>
  </div>

上記のような方法でなくても、もちろん構いません。
以下のようなパターンをあるのかな？とも思考しています。

<span class="design1">デザイン１</span>
<span class="design2">デザイン２</span>
<% if xxxxxxx %>
  <%= render design1 %>
<% else %>
  <%= render design2 %>
<% end %>

アドバイスのほど、よろしくお願いいたします。

Answer 1

クラス名やカスタムデータを工夫すればもうすこし管理しやすくなると思います

• codepen design custom

Comments

[tomtom1]

大変参考になりました！ありがとうございます！

Answer 2

何を持って「非同期」とされているのか存じ上げませんが，質問内容はむしろ同期的です．

目的を達成する手段はいくつもあるでしょうが，利便性や汎用性，効率性などあらゆるものを度外視して最初に示されているテンプレートに適用可能な，単純なJavaScriptコードの例を以下に示します．

document.querySelector('.design1').addEventListener('click', ()=> {
  document.querySelectorAll('.design-two').forEach(el=> {
    el.classList.remove('design-two')
    el.classList.add('design-one')
  })
},false)

document.querySelector('.design2').addEventListener('click', ()=> {
  document.querySelectorAll('.design-one').forEach(el=> {
    el.classList.remove('design-one')
    el.classList.add('design-two')
  })
},false)

要は，DOMを操作してクラスの付替を行います．
上記はなにもライブラリを使用しないコードですが，頻発するような操作ではあるので古くはPrototype.jsやjQueryなんかが，最近ではReactやVue.jsのようなVDOMライブラリなどでも扱いやすくされてきましたが，この程度の操作であれば今時はライブラリは使用するまでもありません．

質問にajaxタグがつけられていますが，以上の内容であればajax(非同期通信)は関係ありません．

---

なお，あくまでもクリックで切替えた表示は「その場限り」です．デザインの切替えを永続化したい場合はセッションやCookie,LocalStorageなどでその状態を保持し，サーバーまたはクライアントでリクエストごとにその表示の変化を適用する必要が生じます．

Comments

[tomtom1]

大変勉強になりました！ありがとうございます！解決しました！