Question

我被困在以下问题上，

我创建了两个按钮，一个用于隐藏设计类中的图像，另一个用于隐藏开发人员类中的图像。我现在需要查看所有按钮来恢复所有图像。这就是我被困住的地方！

拜托，有人可以告诉我如何实现这个目标（不使用jQuery）吗？

我是初学者，所以请随意添加你的建设性批评：）

谢谢！

import re
rows = [
  (datetime.time(20, 35, 30), '0707262078',),
  (datetime.time(20, 38, 18), '+46706332602Ring via Mitel ',),
  (datetime.time(20, 56, 35), '065017063'),
  (datetime.time(21, 45, 1), '+46730522807Ring via Mitel ',),
  (datetime.time(22, 13, 47), '0046733165812')
]

repl_dict = {
  '01': '+461',
  '02': '+462',
  '03': '+463',
  '04': '+464',
  '05': '+465',
  '06': '+466',
  '07': '+467',
  '08': '+468',
  '09': '+469',
  '00': '+'
}

for row in rows:
    regex = re.compile(r'^\d{1}[0-9](\d*)'), re.S
    DialedNumber = regex.sub(lambda match: repl_dict.get(match.group(0), row[1]), row[1], row[1])

var designBtn = document.querySelector('.design-btn');
var developBtn = document.querySelector('.develop-btn');
var veiwBtn = document.querySelector('.add-btn');

var allImages = document.querySelector('.content');
var devImages = document.querySelectorAll('.develop');
var desImages = document.querySelectorAll('.design');

function removeDevImages() {
  var arr = [];
  for (var i = 0; i < devImages.length; i++) {
    arr = devImages[i];
    arr.style.display = 'none';
  }
}

function removeDesImages() {
  var arr = [];
  for (var i = 0; i < desImages.length; i++) {
    arr = desImages[i];
    arr.style.display = 'none';
  }
}


function controller() {
  //Remove Developer images
  designBtn.addEventListener('click', function() {
    removeDevImages();
  });
  //Remove Designer Images
  developBtn.addEventListener('click', function() {
    removeDesImages();
  });
  //Add Images again
  viewAllImages();
}

controller();

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
}

.content {
  display: inline-block;
  margin: 10px;
}

img {
  width: 400px;
  height: auto;
  margin-bottom: 15px;
}

.controler a {
  margin: 15px;
  padding: 10px;
}

a {
  background-color: #333;
  border-radius: 10px;
  text-decoration: none;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: .8;
  font-family: sans-serif;
  font-weight: bold;
  color: #fff;
}

a:hover {
  text-decoration: none;
  color: grey;
  font-weight: normal;
}

.develop {
  display: 'inline-block';
}

请参阅codepen链接： link to codepen

Answer 1

试试这个：

var designBtn = document.querySelector('.design-btn');
var developBtn = document.querySelector('.develop-btn');
var veiwBtn = document.querySelector('.add-btn');

var allImages = document.querySelectorAll('.content img');
var devImages = document.querySelectorAll('.develop');
var desImages = document.querySelectorAll('.design');

function removeDevImages() {
    var arr = [];   
    for (var i = 0; i < devImages.length; i++) {
        arr = devImages[i]; 
        arr.style.display = 'none';     
    }   
}

function removeDesImages() {
    var arr = [];   
    for (var i = 0; i < desImages.length; i++) {
        arr = desImages[i]; 
        arr.style.display = 'none';     
    }   
}


function viewAllImages() {
  var arr = []; 

    for (var i = 0; i < allImages.length; i++) {
        arr = devImages[i]; 
        arr.style.display = 'block';        
    }   
}
function controller(){
    //Remove Developer images
    designBtn.addEventListener('click', function() {
        removeDevImages();
    });
    //Remove Designer Images
    developBtn.addEventListener('click', function() {
        removeDesImages();
    });
  veiwBtn.addEventListener('click', function() {
        viewAllImages();
    });
    //Add Images again

}

controller();

Codepen： https://codepen.io/YasirKamdar/pen/MQvYqg

再次显示我使用查看全部按钮隐藏的图像

1 个答案: