$('#btn').on('click', function(){
$.ajax({
url: 'script.php',
success: function(data) {
alert('Success')
}
});
})
document.addEventListener("DOMContentLoaded", function(event) {
var input1 = document.querySelector("#a");
var input2 = document.querySelector(".b");
input1.addEventListener("input", function(e) {
document.querySelector(".result").innerHTML = "";
if(parseFloat(input1.value)) {
document.querySelector(".result").innerHTML = parseFloat(input1.value) + parseFloat(input2.value);
}
});
});<input type="text" id="a" value="">
<input type="hidden" class="b" value="5">
<p class="result"></p>var a = document.querySelector('#a')
var b = document.querySelector('.b')
var result = document.querySelector('.result')
a.addEventListener('input', function() {
if (a.value) {
result.innerHTML = parseInt(a.value) + parseInt(b.value)
}
})
<div class="filter-control">
<ul data-f1="a">
<li><a data-f2="Chicago" href="#">Chicago</a></li>
<li><a data-f2="Houston" href="#">Houston</a></li>
<li><a data-f2="Dallas" href="#">Dallas</a></li>
</ul>
<ul data-f1="b">
<li><a data-f2="Chicago" href="#">Chicago</a></li>
<li><a data-f2="Houston" href="#">Houston</a></li>
<li><a data-f2="Dallas" href="#">Dallas</a></li>
</ul>
<ul data-f1="c">
<li><a data-f2="beer" href="#">beer</a></li>
<li><a data-f2="whiskey" href="#">whiskey</a></li>
</ul>
</div>
<div class="filteredblock a b c">
<div class="a-Chicago b-Houston c-beer">Chicago Houston beer</div>
<div class="a-Chicago b-Houston c-whiskey">Chicago Houston whiskey</div>
<div class="a-Chicago b-Dallas c-beer">Chicago Dallas beer</div>
<div class="a-Chicago b-Dallas c-whiskey">Chicago Dallas whiskey</div>
<div class="a-Houston b-Chicago c-beer">Houston Chicago beer</div>
<div class="a-Houston b-Chicago c-whiskey">Houston Chicago whiskey</div>
<div class="a-Houston b-Dallas c-beer">Houston Dallas beer</div>
<div class="a-Houston b-Dallas c-whiskey">Houston Dallas whiskey</div>
<div class="a-Dallas b-Chicago c-beer">Dallas Chicago beer</div>
<div class="a-Dallas b-Chicago c-whiskey">Dallas Chicago whiskey</div>
<div class="a-Dallas b-Houston c-beer">Dallas Houston beer</div>
<div class="a-Dallas b-Houston c-whiskey">Dallas Houston whiskey</div>
</div>$(function () {
var $list = $('.filteredblock');
$('.filter-control a').on('click', (e) => {
var $a = $(e.target);
var $li = $a.parent();
var $ul = $li.parent();
var f1 = $ul.data('f1');
var f2 = $a.data('f2');
$li.toggleClass('checked');
if ($li.hasClass('checked')) {
$list.addClass(`${f1}-${f2}`).removeClass(`${f1}`);
} else {
$list.removeClass(`${f1}-${f2}`);
if (!$ul.find('.checked').length)
$list.addClass(`${f1}`);
}
return false;
});
});@charset "utf-8";
body {
background: #fff;
padding: 20px;
font-family: Segoe UI Symbol;
color: #000;
}
.filter-control li {
list-style-type: none;
}
.filter-control li:not(.checked):before {
content: '☐';
}
.filter-control li.checked:before {
content: '☑';
}
.filteredblock > div {
color: #fff;
}
.filteredblock.a.b.c > div,
.filteredblock.a-Chicago > .a-Chicago,
.filteredblock.a-Houston > .a-Houston,
.filteredblock.a-Dallas > .a-Dallas,
.filteredblock.b-Chicago > .b-Chicago,
.filteredblock.b-Houston > .b-Houston,
.filteredblock.b-Dallas > .b-Dallas,
.filteredblock.c-beer > .c-beer,
.filteredblock.c-whiskey > .c-whiskey {
color: #000;
}
.filteredblock:not(.a):not(.a-Chicago) > .a-Chicago,
.filteredblock:not(.a):not(.a-Houston) > .a-Houston,
.filteredblock:not(.a):not(.a-Dallas) > .a-Dallas,
.filteredblock:not(.b):not(.b-Chicago) > .b-Chicago,
.filteredblock:not(.b):not(.b-Houston) > .b-Houston,
.filteredblock:not(.b):not(.b-Dallas) > .b-Dallas,
.filteredblock:not(.c):not(.c-beer) > .c-beer,
.filteredblock:not(.c):not(.c-whiskey) > .c-whiskey {
color: #fff;
}var addCSS = function (selector, style) {
var sheet = window.document.styleSheets[window.document.styleSheets.length - 1];
sheet.addRule(selector, style);
};