jQuery toggleClass example

Toggle class name on click in jQuery

by Dedi Wibisono

HTML

<body>
  <h1>Review Handphone</h1>
  <div class="block">
    <div class="w4">iphone</div>
    <div class="w4">Xiaomi</div>
    <div class="w4">Samsung</div>
    <div class="w4">Oppo</div>
  </div>
  <p>Jika bukan 4 tipe diatas, silahkan cari dibawah ini</p>
  <input type="text" placeholder="iphone" id="dedi" />
  <button id="lala">Search</button>
</body>

CSS

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

.block {
  display: block;
  margin: 24px 0
}

.w4 {
  width:20%;
  border:1px solid;
  display:inline-block;
  font-weight: bold;
  text-align:center;
  padding: 24px;
  box-sizing:border-box;
  cursor:pointer;
  border-radius:8px;
}

JavaScript

var settings = {
	"async": true,
	"crossDomain": true,
	"url": "https://mobile-devices.p.rapidapi.com/getdevice?device=p40",
	"method": "GET",
	"headers": {
		"x-rapidapi-host": "mobile-devices.p.rapidapi.com",
		"x-rapidapi-key": "b66eb3153bmsh1d00af693516ac2p106275jsn0b6d5b9e5b20"
	}
}

$.ajax(settings).done(function (response) {
	console.log(response);
});
var dedi = $("#dedi").val(); 
alert(typeof dedi)
$("#lala").click(function(){
	alert(dedi)
})