I try build some project with JQuery toggleClass. I want make position toggle follow some last record data.
This my HTML
<div class="action-lock">
<div class="toggle-pane">
<div class='unique' id='switch'>
<div class='toggle-text-off'>Unlocked</div>
<div class='glow-comp'></div>
<div class='toggle-button'></div>
<div class='toggle-text-on'>Locked</div>
</div>
</div>
</div>
And this JQuery
$scope.last = "a";
$('.unique').click(function (e) {
e.preventDefault();
if($scope.last == "b"){
$(this).toggleClass('toggle-on');
}else{
$(this).toggleClass('toggle-off');
}
});
I try but toggle position always in Locked, I don't know how to make position toggle from data $scope.last. Please help me to solved this problem. Thanks
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.last = ""
$scope.toggleclick = function(last){
debugger;
if(last == "a"){
$(".toggle-text-on").toggleClass('toggle-on');
$(".toggle-text-off").toggleClass('toggle-off');
}else if(last != "a"){
$(".toggle-text-on").toggleClass('toggle-off');
$(".toggle-text-off").toggleClass('toggle-on');
}
};
}]);
.toggle-text-off.toggle-on,.toggle-text-on.toggle-on{display:block;}
.toggle-text-off,.toggle-text-on{display:none;}
.maginbt10{margin-bottom:10px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="controllerName">
<div class="action-lock">
<input type="text" ng-model="last" name="mail" class="maginbt10" />
<div class="toggle-pane">
<div class='unique' id='switch'>
<div class='toggle-text-off' ng-class="{'toggle-on':last != 'a'}">Unlocked</div>
<div class='glow-comp'></div>
<div class='toggle-button'></div>
<div class='toggle-text-on' ng-class="{'toggle-on':last == 'a'}">Locked</div>
</div>
</div>
</div>
</body>
You question isn't clear but this is my guess from your explanation.
$('.unique').click(function (e) {
e.preventDefault();
$(this).toggleClass('toggle-on').toggleClass('toggle-off');
});
and html
<div class="action-lock">
<div class="toggle-pane">
<div class='unique toggle-on' id='switch'>
<div class='toggle-text-off'>Unlocked</div>
<div class='glow-comp'></div>
<div class='toggle-button'></div>
<div class='toggle-text-on'>Locked</div>
</div>
</div>
</div>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.last = "a";
$scope.toggleclick = function(){
if($scope.last == "a"){
$(".toggle-text-on").toggleClass('toggle-off');
$(".toggle-text-off").toggleClass('toggle-on');
$scope.last = "b";
}else{
$(".toggle-text-on").toggleClass('toggle-on');
$(".toggle-text-off").toggleClass('toggle-off');
$scope.last = "a";
}
};
}]);
.toggle-on,.toggle-text-off.toggle-on{display:block;}
.toggle-off,.toggle-text-off{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="controllerName">
<div class="action-lock">
<div class="toggle-pane">
<div class='unique' id='switch'ng-click="toggleclick()">
<div class='toggle-text-off' ng-click="toggleclick()">Unlocked</div>
<div class='glow-comp'></div>
<div class='toggle-button'></div>
<div class='toggle-text-on' ng-click="toggleclick()">Locked</div>
</div>
</div>
</div>
</body>
Related
I want to archive that I remove all duplicate items within every each.
So I go a div with items:
<div class="each">
<div>Test2</div>
<div>Test</div>
<div>Test</div>
</div>
<div class="each">
<div>Test2</div>
<div>Test</div>
<div>Test</div>
</div>
And my Jquery so far:
$('.dropPlace').each(function(index){
console.log($(this).text());
});
So I want to check within every div is there existing two duplicate text. And only removed with the duplicated once within the div.
So the result would be this:
<div class="each">
<div>Test2</div>
</div>
<div class="each">
<div>Test2</div>
</div>
The below can be optimized for sure, but it will give the result you asked for:
<div class="each">
<div>Test2</div>
</div>
<div class="each">
<div>Test2</div>
</div>
$('.each').each(function() {
const textAr = [];
let parent = $(this);
parent.children('div').each(function() {
let _this = $(this), elText = _this.text();
if(textAr.includes(elText)) {
parent.children('div').each(function() {
let _child = $(this);
if(_child.text() == elText){
_child.remove();
}
})
}
else textAr.push(elText)
});
});
.each {
margin-bottom: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="each">
<div>Test2</div>
<div>Test</div>
<div>Test</div>
</div>
<div class="each">
<div>Test2</div>
<div>Test</div>
<div>Test</div>
</div>
here is a working demo.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var map = {};
$("#remove").click(function () {
// use an object as map
var map = {};
$(".dropPlace").each(function () {
var value = $(this).text();
if (map[value] == null) {
map[value] = true;
} else {
$(this).remove();
}
});
});
});
</script>
</head>
<body>
<div class="each">
<div class="dropPlace">Test2</div>
<div class="dropPlace">Test</div>
<div class="dropPlace">Test</div>
</div>
<div class="each">
<div class="dropPlace">Test2</div>
<div class="dropPlace">Test</div>
<div class="dropPlace">Test</div>
</div>
<button id="remove">remove</button
</body>
</html>
I have some code where I need to hide a div if another is empty.
Basically, if .plant_profile_link has no content, hide .plant_profile_display
My attempt
$(document).ready(function() {
if (!$.trim($(".plant_profile_link").html()) == true)
$(".plant_profile_display").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_text_inner">
<div class="plant_profile_display">Bobo</div>
</div>
</div>
<!-- .et_pb_text -->
<div class="et_pb_module et_pb_text et_pb_text_7_tb_body et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
Your code works if we add jQuery
I would user toggle
$(function() {
$(".plant_profile_display").toggle($(".plant_profile_link").text().trim() !== "");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="et_pb_text_inner">
<div class="plant_profile_display">Bobo</div>
</div>
</div>
<!-- .et_pb_text -->
<div class="et_pb_module et_pb_text et_pb_text_7_tb_body et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
<div class="et_pb_text_inner">
<div class="plant_profile_link"></div>
</div>
Maybe something like this suits you
$(document).ready(function() {
var $plantLinks = $('.plant_profile_link')
var $plantDisplay = $('.plant_profile_display')
if($plantLinks.children().length > 0 || $plantLinks.text().length > 0) {
$plantDisplay.show();
} else {
$plantDisplay.hide();
}
});
This is my HTML code.In this i am taking multiple values from ng-repeat and for each value i want the respective button to show and hide two div elements.In my web page , the buttons from different member blocks are working to show/hide only the first member block... The button with id=round should toggle btw div elements with id= first and id= second for all members that i get through ng-repeat.
<section id="team">
<div ng-controller="teamController as tctrl">
<div class="container">
<div class="row">
<div class="col-md-3 bord" ng-repeat="member in tctrl.members">
<button id="round" ng-click="showHide($index)">
<img id="direction" src="img/icon/uparrow.png">
</button>
<img ng-src="{{member.image}}">
<div id="first" class="memberabout" >
<h3 ng-bind="member.title"></h3>
<h2 ng-bind="member.name"></h2>
</div>
<div id="second" class="hid" >
<p ng-bind="member.about"></p>
</div>
</div>
</div>
</div>
</div>
</section>
and this is the js function i am trying to use:
$scope.showHide = function(index) {
if (document.getElementById('first') !== undefined) {
if (document.getElementById('first').style.display == 'none') {
document.getElementById('first').style.display = 'block';
document.getElementById('second').style.display = 'none';
var down = document.getElementById('round');
down.style.top = "201px";
var direction = document.getElementById('direction');
direction.src = 'img/icon/uparrow.png';
} else {
document.getElementById('first').style.display = 'none';
document.getElementById('second').style.display = 'block';
var down = document.getElementById('round');
down.style.top = "71px";
var direction = document.getElementById('direction');
direction.src = 'img/icon/arrowdown.png';
}
}
};
How should I pass the id's so that each button works to show/hide the div elements in their block?
Angularjs has many options to cancle using jQuery in your applications; options like modeling, directive and etc...
In your case you didn't need to use id because when we use ng-repeat in fact all of items are unique, so we just use them to show/hide or many other option you can do with object in the ng-repeat.
I hope this sample helps you to figure out how to use it:
var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
var main = this;
main.members = [{
image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4f5PCRqcMgg_KHymC29ABsy-PDFI08mb6qHqMviqbDDHjjuYM9g",
title: "A",
name: "jack",
about: "Hello World"
},
{
image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQAxySZHmSrUU1_iIFJHGdDTdmTCAE610QnPwptWGWbMRAbSUzgNA",
title: "B",
name: "philip",
about: "Hello World 2"
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div ng-app="app" ng-controller="ctrl as tctrl">
<section id="team">
<div class="container">
<div class="row">
<div class="col" ng-repeat="member in tctrl.members">
<small>this is unique id if you want to use it: <b>id_{{$index}}</b> </small>
<div class="card">
<button ng-click="member.show = !member.show">
show/hide
</button>
<img ng-src="{{member.image}}">
<div ng-hide="member.show">
<h3 ng-bind="member.title"></h3>
<h2 ng-bind="member.name"></h2>
</div>
<div ng-show="member.show">
<p ng-bind="member.about"></p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
The last question is here:
Wrap some divs with Two different columns
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/infinite-scroll#3/dist/infinite-scroll.pkgd.min.js"></script>
<script type="text/javascript">
$('.wrapper').each(function() {
$(this).find(".lpost").wrapAll('<div class="left_columns"></div>')
$(this).find(".rpost").wrapAll('<div class="right_columns"></div>')
})
</script>
<div class="wrapper">
<div class="rpost">-115</div>
<div class="lpost">-91</div>
<div class="lpost">-99</div>
<div class="rpost">-181</div>
<div class="lpost">-19</div>
<div class="rpost">-135</div>
<div class="rpost">-85</div>
<div class="lpost">-39</div>
</div>
<script type="text/javascript">
var $container = $('.wrapper').infiniteScroll({
path: '.next-post',
append: '.post',
hideNav: '.pagination',
status: '.page-load-status',
});
$container.on('append.infiniteScroll',
function(event, response, path, items) {
$(function() {
$('.wrapper').each(function() {
$(this).find(".lpost").wrapAll('<div class="left_columns"></div>')
$(this).find(".rpost").wrapAll('<div class="right_columns"></div>')
})
});
});
</script>
If scroll down three pages result:
<div class="wrapper">
<div class="left_columns">
<div class="left_columns">
<div class="left_columns">
<div class="lpost">-91</div>
<div class="lpost">-99</div>
<div class="lpost">-19</div>
<div class="lpost">-39</div>
</div>
</div>
</div>
</div>
have too many left_columns and right_columns divs
how to fix this?
You should to check if the .right_columns or .left_columns exists or not:
$('.wrapper').each(function() {
var lpost = $(this).find(".lpost"),
rpost = $(this).find(".rpost"),
lcol = $(this).find('.left_columns');
if(lcol.length){
var rcol = $(this).find('.right_columns');
lpost.appendTo(lcol);
rpost.appendTo(rcol);
}else{
lpost.wrapAll('<div class="left_columns"></div>');
rpost.wrapAll('<div class="right_columns"></div>');
}
})
I am trying to replace the content of the divs on checkbox's check/un-check events.
HTML:
<div class="checks">
<input type="checkbox" class="section-1" value="section-1">check-1
<input type="checkbox" class="section-2" value="section-2">check-2
<input type="checkbox" class="section-3" value="section-3">check-3
<input type="checkbox" class="section-4" value="section-4">check-4
<input type="checkbox" class="section-5" value="section-5">check-5
<input type="checkbox" class="section-6" value="section-6">check-6
<input type="checkbox" class="section-7" value="section-7">check-7
</div><br><br>
<div class="divs">
<div class="section-1">
<div class="content-1">
div-1
</div>
</div>
<div class="section-2">
<div class="content-2">
div-2
</div>
</div>
<div class="section-3">
<div class="content-3">
div-3
</div>
</div>
<div class="section-4">
<div class="content-4">
div-4
</div>
</div>
<div class="section-5">
<div class="content-5">
div-5
</div>
</div>
<div class="section-6">
<div class="content-6">
div-6
</div>
</div>
<div class="section-7">
<div class="content-7">
div-7
</div>
</div>
</div>
<div class="divs-back" style="display: none">
<div class="section-1">
<div class="content-1">
div-1
</div>
</div>
<div class="section-2">
<div class="content-2">
div-2
</div>
</div>
<div class="section-3">
<div class="content-3">
div-3
</div>
</div>
<div class="section-4">
<div class="content-4">
div-4
</div>
</div>
<div class="section-5">
<div class="content-5">
div-5
</div>
</div>
<div class="section-6">
<div class="content-6">
div-6
</div>
</div>
<div class="section-7">
<div class="content-7">
div-7
</div>
</div>
</div>
jQuery:
$(":checkbox:lt(7)").prop("checked", true);
var array = ["section-1", "section-2", "section-3", "section-4", "section-5", "section-6", "section-7"];
var unArray = [];
var unChecked = 0;
$('input[type="checkbox"]').click(function () {
if ($(this).prop('checked')) {
// Add the new element if checked:
if (array.indexOf($(this).val()) < 0) {
array.push($(this).val());
unChecked = unArray.slice(-1)[0];
unArray.splice(-1, 1);
}
} else {
// Remove the element if unchecked:
if (array.indexOf($(this).val()) >= 0) {
array.splice(array.indexOf($(this).val()), 1);
unArray.push($(this).val());
unChecked = 0;
}
}
showHideDiv($(this).val(), unChecked);
console.log(array);
console.log(unArray);
});
function showHideDiv(value, unCheked) {
console.log(unCheked);
if (unCheked != '0') {
$('.divs').find("." + unCheked).html($('.divs-back').find("." + value).html());
} else {
$('.divs').find("." + value).html('');
}
}
It is replacing the contents successfully on first attempt. But on the second attempt, the positions of the div contents are changed so not getting the desired output.
jsfiddle: https://jsfiddle.net/2th5gmLa/
Edit:
Actually, I don't want to just hide show. I want to replace the div content on last unchecked section. When I uncheck Section-1, Section-2, Section-3, then if we check section-1, then it should place in the DIV of the Section-3.
Why your code is not working?
The issue is you are pushing element. The push() method adds new items to the end of an array, and returns the new length.
//array.push($(this).val());
remove this line
Change you have to make.
$('input[type="checkbox"]').click(function() {
var unchkdArray = [];
var chkdArrray = [];
$('input[type="checkbox"]').map(function(){
if ($(this).is(':checked')) {
chkdArrray.push($(this).val())
} else {
unchkdArray.push($(this).val())
}
});
var selected = $(this).val()
if ($(this).is(':checked')) {
$('div.' + selected).show()
} else {
$('div.' + selected).hide()
}
});
Fiddle Demo
Try this...
Plunker Link
$(":checkbox:lt(7)").prop("checked", true);
var array = ["section-1", "section-2", "section-3", "section-4", "section-5", "section-6", "section-7"];
var unArray = [];
var unChecked = 0;
$('input[type="checkbox"]').click(function () {
console.log($(this)['context']['className']);
$( ".divs ."+$(this)['context']['className'] ).toggleClass( "hide" )
});
Plunker Link