Jsを簡略化するか、PHPに変換する）

-2

私は自分のウェブサイトで「チャット」を作成しようとしていますが、html（ラジオ）で質問と回答を書いています。スクリプトは他のラジオを隠し、選択したラジオを無効にします。おそらく私はすべてのコードを簡素化する必要がありますが、私は親切にもJsとのノブです。同じ結果を達成するより簡単な方法がありますか？私はPHPでそれを変換する必要がありますか？誰でも助けることができますか？Jsを簡略化するか、PHPに変換する）

どうもありがとう

<!DOCTYPE html> 
<html> 
<head> 
<title>progettodont</title> 
<style type="text/css"> 



.classQuestion  { 
      margin: 10px; 
      padding: 10px; 
      border-radius: 7px; 
      color: #fff; 
      background-color: #119b97; 
      display: inline-block; 
      max-width: 700px; 
} 

.classAnswerActive {float: right;} 

.divClassAnswer {text-align: center} 


.classAnswer { margin: 10px; 
      padding: 10px; 
      border-radius: 7px; 
      color: #414042; 
      background-color: #ccc; 
      max-width: 700px; 
      display: inline-block; 
} 

.classRadio  {display: none;} 




</style> 
</head> 
<body> 


<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
</script> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
</script> 




    <script> 
    $(document).ready(function(){ 
     $('.classAnswer').click(function(){ 
     $('.classAnswer').not(this).hide(); 
     }); 
    }); 

    </script> 


    <script> 
    $(document).ready(function() { 
     $('.classAnswer').on('click', function() { 
      $('.classAnswer').addClass('classAnswerActive'); 
     }); 
    }); 

    </script> 


    <div class="classQuestion">QUESTION 1_1</div> 

    <div class="divClassAnswer"> 

    <label for="idAnswer_1_1" class="classAnswer">ANSWER 1_1</label> 
    <input type="radio" name="nameAnswer_1_1" class="classRadio" 
id="idAnswer_1_1" value="Answer_1_1"> 

    <label for="idAnswer_1_2" class="classAnswer">ANSWER 1_2</label> 
    <input type="radio" name="nameAnswer_1_2" class="classRadio" 
id="idAnswer_1_2" value="Answer_1_2"> 

<label for="idAnswer_1_3" class="classAnswer">ANSWER 1_3</label> 
<input type="radio" name="nameAnswer_1_3" class="classRadio" 
id="idAnswer_1_3" value="Answer_1_3"> 

</div> 


<script type="text/javascript"> 
    $(function() { 
     $("#idAnswer_1_1").click(function() { 
      if ($(this).is(":checked")) { 
       $("#idQuestion_2_1").show(); 
      } else { 
       $("#idQuestion_2_1").hide(); 
      } 
     }); 

    }); 

</script> 


<div class="classQuestion" id="idQuestion_2_1" style="display: none"> 
QUESTION 2_1 
</div> 

<script type="text/javascript"> 
    $(function() { 
     $("#idAnswer_1_2").click(function() { 
      if ($(this).is(":checked")) { 
       $("#idQuestion_2_2").show(); 
      } else { 
       $("#idQuestion_2_2").hide(); 
      } 
     }); 

    }); 
</script> 


<div class="classQuestion" id="idQuestion_2_2" style="display: none"> 
     QUESTION 2_2 
</div> 

<script type="text/javascript"> 
    $(function() { 
     $("#idAnswer_1_3").click(function() { 
      if ($(this).is(":checked")) { 
       $("#idQuestion_2_3").show(); 
      } else { 
       $("#idQuestion_2_3").hide(); 
      } 
     }); 

    }); 
</script> 


<div class="classQuestion" id="idQuestion_2_3" style="display: none"> 
QUESTION 2_3 
</div> 
</body>

出典

2017-06-23 Enrico Tenca

質問は何ですか？ – mkaatman

申し訳ありませんが、同じ結果を達成するためのより簡単な方法がありますか？ –

しかし私はあなたのコードにいくつかの改善を行うことができ、これは「チャット」システムに関係しているのか分からない：

あなたがしていますjQueryの複数のバージョンが含まれます。 1つだけを含む。
すべてのスクリプトをページ内の単一の<script>に配置し、任意のjQueryコードを単一のdocument.readyイベントハンドラ内に配置します。
共通のクラスを使用して、ラジオ要素をグループ化します。次に、単一のイベントハンドラをそのクラスにバインドすることができます。 data属性を使用して、イベントハンドラで使用できる要素に関するカスタムメタデータを格納できます。

これを試してみてください：

$(document).ready(function() { 
 
    $('.classAnswer').click(function() { 
 
    $('.classAnswer').not(this).hide(); 
 
    $(this).addClass('active'); 
 
    }); 
 

 
    $(".classRadio").on('change', function() { 
 
    $('#' + $(this).data('target')).toggleClass('active', this.checked); 
 
    }); 
 
});

.classQuestion { 
 
    margin: 10px; 
 
    padding: 10px; 
 
    border-radius: 7px; 
 
    color: #fff; 
 
    background-color: #119b97; 
 
    display: inline-block; 
 
    max-width: 700px; 
 
    display: none; 
 
} 
 
.classQuestion.active { display: inline-block; } 
 

 
.divClassAnswer { 
 
    text-align: center 
 
} 
 

 
.classAnswer { 
 
    margin: 10px; 
 
    padding: 10px; 
 
    border-radius: 7px; 
 
    color: #414042; 
 
    background-color: #ccc; 
 
    max-width: 700px; 
 
    display: inline-block; 
 
} 
 
.classAnswer.active { 
 
    float: right; 
 
} 
 

 
.classRadio { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<div class="classQuestion active">QUESTION 1_1</div> 
 
<div class="divClassAnswer"> 
 
    <label for="idAnswer_1_1" class="classAnswer">ANSWER 1_1</label> 
 
    <input type="radio" name="nameAnswer_1_1" class="classRadio" id="idAnswer_1_1" value="Answer_1_1" data-target="idQuestion_2_1"> 
 

 
    <label for="idAnswer_1_2" class="classAnswer">ANSWER 1_2</label> 
 
    <input type="radio" name="nameAnswer_1_2" class="classRadio" id="idAnswer_1_2" value="Answer_1_2" data-target="idQuestion_2_2"> 
 

 
    <label for="idAnswer_1_3" class="classAnswer">ANSWER 1_3</label> 
 
    <input type="radio" name="nameAnswer_1_3" class="classRadio" id="idAnswer_1_3" value="Answer_1_3" data-target="idQuestion_2_3"> 
 
</div> 
 

 
<div class="classQuestion" id="idQuestion_2_1">QUESTION 2_1</div> 
 
<div class="classQuestion" id="idQuestion_2_2">QUESTION 2_2</div> 
 
<div class="classQuestion" id="idQuestion_2_3">QUESTION 2_3</div>

出典

2017-06-23 16:30:04

ありがとうございました...「チャット」と呼ばれるように、それは私とゲストの間の情報の交換です。私はたくさんの質問と答えを書いています。私はそれがコード全体の最小限の部分であることを示したコードをobiouvslyしました。私はWhatsappの会話のようなスタイルにしたいので、私はそれをチャットと呼んだ。 –

Jsを簡略化するか、PHPに変換する）

答えて

関連する問題