jQueryを使ってクリックした要素を取得して.selectedクラス(クリックした要素が分かりやすいように濃くするクラス)を反映させたいです。
以下のコードでうまくいかなくて困っております。
原因を教えていただければ幸いです。
html
1<?php 2 3require_once(__DIR__ . '/functions.php'); 4 5$text1 =''; 6$text2=''; 7 8if ($_SERVER['REQUEST_METHOD'] === 'POST'){ 9 $text1 = $_POST['text1']; 10 $text2 = $_POST['text2']; 11} 12 $result = $text1 + $text2 13 ?> 14 15<!DOCTYPE html> 16<html lang = "ja"> 17<head> 18 <meta charset = "utf-8"> 19 <title>calculator</title> 20 <link rel="stylesheet" href="styles.css"> 21</head> 22<body> 23<div id ="container"> 24 <h1>計算</h1> 25 <form action="" method="POST"> 26 <div id="container-1"> 27 <input type="text" id="text1" name="text1" placeholder="text1" value="<?= h($text1); ?>" onKeyup="this.value=this.value.replace(/[^0-9]+/,'')"> 28 <ul> 29 <li data-id="puls" class="btn">+</li> 30 <li data-id="mainasu" class="btn">−</li> 31 <li data-id="kakeru" class="btn">×</li> 32 <li data-id="waru" class="btn">÷</li> 33 <input type="hidden" id="answer" name="answer" value=""> 34 </ul> 35 <input type="text" id="text2" name="text2" placeholder="text2" value="<?= h($text2); ?>" onKeyup="this.value=this.value.replace(/[^0-9]+/,'')"> 36 </div> 37 <input type="submit" id="result" value ="result"> 38 <div id="cal_result"><?= h($result); ?></div> 39</div> 40</form> 41<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 42<script> 43$(function(){ 44 'use strict'; 45 46 $('.btn').on('click', function(){ 47 $('.btn').removeClass('selected'); 48 $(this).addClass('selected'); 49}); 50</script> 51</body> 52</html> 53
css
1body { 2 font-size: 16px; 3 font-family: Arial, sans-serif; 4} 5 6#container { 7 text-align: center; 8 width: 500px; 9 margin: 15px auto; 10} 11h1{ 12 font-size: 20px; 13 line-height:50px; 14 padding: 10px; 15} 16h1 ,ul > li { 17 border: 1px solid #ddd; 18 border-radius: 5px; 19} 20#container-1{ 21 display: flex; 22} 23ul{ 24margin:auto; 25 list-style: none; 26 padding: 0; 27} 28li{ 29 width:20px; 30 margin: auto; 31 cursor: pointer; 32} 33#text1{ 34 height: 10px; 35 margin-top: 25px; 36} 37#text2{ 38 height: 10px; 39 margin-top: 25px; 40} 41#result{ 42 margin-top: 15px; 43 float:right; 44 cursor: pointer; 45 box-shadow: 0 4px 0 #0088cc; 46 width: 100px; 47} 48#cal_result{ 49 float:right; 50 margin-top: 15px; 51} 52.btn{ 53 opacity: 0.5; 54 font-weight: bold; 55} 56.btn + .btn{ 57 margin-top: 5px; 58} 59.selected{ 60 opacity: 1.0; 61} 62
php
1<?php 2 3function h($s){ 4 return htmlspecialchars($s, ENT_QUOTES, 'UTF-8'); 5} 6
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/04 15:07