Как кратко написать этот JavaScript, чтобы показать / скрыть список элементов? - PullRequest
Новая
       0

Как кратко написать этот JavaScript, чтобы показать / скрыть список элементов?

0 голосов
/ 20 февраля 2012

Как написать этот тип кода в цикле?На самом деле я не хочу писать одну и ту же строку снова и снова, есть ли какой-нибудь способ сжать этот код?мы можем написать этот код в цикле? 

function showCandidates()
{document.getElementById("cand9").style.display="block";
document.getElementById("cand10").style.display="block";
document.getElementById("cand11").style.display="block";
document.getElementById("cand12").style.display="block";
document.getElementById("cand13").style.display="block";
document.getElementById("cand14").style.display="block";
document.getElementById("cand15").style.display="block";
document.getElementById("hide_cand").style.display="block";
document.getElementById("view_cand").style.display="none";
}

function hideCandidates()
{document.getElementById("cand9").style.display="none";
document.getElementById("cand10").style.display="none";
document.getElementById("cand11").style.display="none";
document.getElementById("cand12").style.display="none";
document.getElementById("cand13").style.display="none";
document.getElementById("cand14").style.display="none";
document.getElementById("cand15").style.display="none";
document.getElementById("hide_cand").style.display="none";
document.getElementById("view_cand").style.display="block";
}

Ответы [ 8 ]

1 голос
/ 20 февраля 2012

Вы должны присвоить своим html-элементам класс, например

<div class="hideable" >content </div>

Затем вы либо используете JQuery, либо обычный javascript, чтобы получить все элементы, имеющие атрибут «скрываемый класс»: 

document.getElementsByClassName('hideable')

или 

>$(".hideable")

Поскольку ваши два предыдущих метода будут возвращать массив, вам придется циклически проходить по массиву и применять соответствующий атрибут стиля.

1 голос
/ 20 февраля 2012

Я предлагаю так: 

var show_ids = ["cand9", "cand10", "cand11"] // ... and so on

funciton showCandidates() {
    for (var index in show_ids) {
        var id = show_ids[index];
        document.getElementById(id).style.display="none";
    }
}

аналогично для hideCandidates

0 голосов
/ 20 февраля 2012

Попробуйте это . Он будет скрыт / показан (так, как вы просили) по параметру, заданному для функции. 

    setVisibilityByClass("visible"/"invisible") - shows/hides by changing class
    setVisibility("block"/"none") - shows/hides by changing styles directly
CHOOSE ONLY ONE.

css классы:

.vissible {display: block;} .invissible {display: none;}

Функции Js: 

function setVisibility(val) {
    var not = new Array;
    not["none"] = "block";
    not["block"] = "none";
    for (i = 9; i <= 15; i++){
        document.getElementById("cand" + i).style.display = val;
    }
    document.getElementById("hide_cand").style.display = val;
    document.getElementById("view_cand").style.display = not[val];
}
function setVisibilityByClass(val) {
    var not = new Array;
    not["invissible"] = "vissible";
    not["vissible"] = "invissible";
    for (i = 9; i <= 15; i++){
        document.getElementById("cand" + i).setAttribute("class", val);
    }
    document.getElementById("hide_cand").setAttribute("class", val);
    document.getElementById("view_cand").setAttribute("class", not[val]);
}
0 голосов
/ 20 февраля 2012

Надеюсь, это поможет: 

(function() {
  "use strict";

  var candidates = {
    idx: 0,
    getElement: function(id) { return document.getElementById(id); },

    toggle: function(elmnts, obj) {
      var idx = candidates.idx,
          getElement = function(id) { return candidates.getElement(id); };

      if (elmnts.length) {
        while ( idx < elmnts.length ) {
          getElement(elmnts[idx]).style.display = obj.display;
          idx++;
        }
      }
    }
  };

  var idsToHide = [
    "cand9", "cand10", "cand11", "cand12",
    "cand13", "cand14", "cand15", "hide_cand"
  ];
  var idsToShow = [
    "cand9", "cand10", "cand11", "cand12",
    "cand13", "cand14", "cand15", "hide_cand"
  ];

  function showCandidates() {
      candidates.toggle(idsToShow, {
          display: "block" 
      });
      candidates.toggle(["view_cand"], { display: "none" });
  }
  function hideCandidates() {
      candidates.toggle(idsToHide, {
          display: "none"
      });
      candidates.toggle(["view_cand"], { display: "block" });
   }
})();
0 голосов
/ 20 февраля 2012

(1) Прежде всего, подобные поиски лучше всего выполнять с помощью jquery. Помимо того, что это проще (см. Код ниже), оно также позволяет предварительно рассчитать набор элементов для действий. Это важно, потому что поиск по идентификатору сканирует все дерево документа. Соответственно, чем больше элементов на странице, тем медленнее будет пересчитываться набор элементов для действия.

(2) Вместо того, чтобы устанавливать отдельные свойства, гораздо лучше использовать класс css. 

<style>
 .invisible {display:none !important;}
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" charset="utf-8"> // <![CDATA[


$(document).ready(function(){  


var hide = function(i) {i.addClass('invisible');};
var show = function(i) {i.removeClass('invisible');};


var candidates = $("#cand9, #cand10 /* etc. [...] */");
/* or, if you rejig this to set a class on all candidate elements:
var candidates = $(".candidate"); */

var hide_cand = $("#hide_cand");
var view_cand = $("#view_cand");
function showCandidates()
{
    show(candidates);
    show(view_cand);
    hide(hide_cand);
}

});  
// ]]>
</script>

Я оставляю соответствующий hideCandidates в качестве упражнения для читателя.

0 голосов
/ 20 февраля 2012

Легко сделать с помощью jQuery: 

$(document).ready(function(){
    $("#candidates").toggle(function (){
        $(this).text('Hide Candidates');
        $.each($('.candidate'), function() {
            $(this).show();
        });
    }, function() {
        $(this).text('Show Candidates');
        $.each($('.candidate'), function() {
            $(this).hide();
        });
    });
});

HTML: 

<a href="#" id="candidates">Show Candidates</a>

<div class='candidate' id='1'>
    <h1>Hello</h1>
</div>
<div class='candidate' id='2'>
    <h1>Hello</h1>
</div>
<div class='candidate' id='3'>
    <h1>Hello</h1>
</div>

CSS: 

.candidate { display: none }

Вот скрипка JS: http://jsfiddle.net/vbh5T/

Если вы не хотите использовать jQuery, игнорируйте мой ответ.

0 голосов
/ 20 февраля 2012

Как то так?

for(i=0;i<candNumber;i++){

id= "cand" + i;

document.getElementById(id).style.display="block";

}

0 голосов
/ 20 февраля 2012

Во-первых, все это может быть заключено в одну функцию.Функция может принимать параметр, назначаемый свойству display.И, очевидно, используйте некоторые операторы if, чтобы справиться с отображением элементов view_cand.

Я хотел бы изучить использование jquery для этого, хотя это делает выбор элементов DOM (особенно наборов элементов DOM) чертовым сайтом проще.

Я бы написал для вас код здесь, но я ничего не знаю об элементах, которые вы выбираете, или структуре вашего DOM.

...