Question

我正在尝试根据自己的选择将数据值切换为动物或植物，并且我希望保持动物< / strong>数组作为默认。我的代码无法正常工作，并且有一种方法可以安全地执行此操作，而不会过多地破坏全局空间

Answer 1

在无需进行太多更改的情况下，以下代码通过在每个事件处理程序中添加#show来更改document.getElementById('show').innerHTML = data.toString();中的值。

let animal = ['cat','dog','lion'];
let plant =['Orange','Mango','banana'];
//-----//defult----
data = animal; 
let toolTipsMsg ='Animal distribution';
//-----//defult----

let anima = document.querySelector('#animalBtn');
let plan = document.querySelector('#plantBtn');

function fnAnimal(){
  if(data !== animal){
    window.data =  animal;
    window.toolTipMsg ='Animal distribution';
  }
  document.getElementById('show').innerHTML = data.toString();
}

function fnPlant(){
  if(data !== plant){
    window.data = plant;
    window.toolTipMsg ='Plant distribution';
  }
  document.getElementById('show').innerHTML = data.toString();
}

anima.addEventListener('click', fnAnimal, false);
plan.addEventListener('click', fnPlant, false);

 <!--//button-->
 <div class="btn-group btn-group-toggle">
        <label class="btn btn-outline-primary" >
            <input type="radio" name="source" id="animalBtn" autocomplete="off"> Animal
        </label>
        <label class="btn btn-outline-primary">
            <input type="radio" name="source" id="plantBtn" autocomplete="off" > Plant
        </label>
    </div>
    <p id='show'> </p>
<!--//button-->

如果要防止变量泄漏到全局范围内，可以将代码包装在自执行函数中，例如

(function() {
  // your code here
})();

然后应为变量删除window前缀。

Answer 2

将数据放在使用源作为键的对象中。然后，您可以轻松添加更多源，而不必为每个源编写新代码。

您需要在点击处理程序中更新内部HTML。

let sources = {
  animal: { list: ['cat','dog','lion'], tooltip: 'Animal distribution'},
  plant: { list: ['Orange','Mango','banana'], tooltip: 'Plant distribution'}
};

let anima = document.querySelector('#animalBtn');
let plan = document.querySelector('#plantBtn');

function selectSource(source) {
  sources.current = sources[source];
  window.toolTipMsg = sources.current.tooltip;
  document.getElementById('show').innerHTML = sources.current.list.toString();
  
}

anima.addEventListener('click', function(e) {selectSource(e.currentTarget.dataset.source);}, false);
plan.addEventListener('click', function(e) {selectSource(e.currentTarget.dataset.source);}, false);

selectSource("animal");

<!--//button-->
 <div class="btn-group btn-group-toggle">
        <label class="btn btn-outline-primary" >
            <input type="radio" name="source" id="animalBtn" data-source = "animal"> Animal
        </label>
        <label class="btn btn-outline-primary">
            <input type="radio" name="source" id="plantBtn" data-source="plant"> Plant
        </label>
    </div>
    <p id='show'> </p>
<!--//button-->

如何使单选按钮切换值

2 个答案: