Javascript onmouseover、onmouseout和onclick逻辑以显示/隐藏

我在一个网页上有许多与放大器交互的按钮。我希望每个都基于鼠标事件执行三个JavaScript函数中的一个

我遇到的问题是，当我点击一个按钮时，其他行消失了，但当我将鼠标移出时，所有行再次显示。我需要的是：

onmouseover=悬停时，隐藏非对应元素，聚焦以保持可见。（出于各种原因，使用不透明度=0。）

onclick=永久隐藏非对应元素，直到单击另一个按钮

onmouseout=如果未单击，则显示所有元素，但如果单击，则仅显示聚焦元素，直到单击另一个按钮

您可以在这里看到函数。他们都工作，只是不知道如何得到我需要的工作

function resetall(focus) {
  features.eachLayer(function(l) {
    var props = l.feature.properties;
    props['stroke-opacity'] =  1;
  });
  features.setGeoJSON(geojson);
};

function clickline(focus) {
  features.eachLayer(function(l) {
    var props = l.feature.properties;
    props['stroke-opacity'] = (props.id !== focus) ? 0.5 : 1;
  });
  features.setGeoJSON(geojson);
};

function showline(focus) {
  features.eachLayer(function(l) {
    var props = l.feature.properties;
    props['stroke-opacity'] = (props.id === focus) ? 1 : 1;
  });
  features.setGeoJSON(geojson);
};

function updateheader(focus) {
  // Iterate through each feature in the , 
  // features object and alter the properties.
  features.eachLayer(function(l) {
    var props = l.feature.properties;
          if (props.id === focus)   {
        props['stroke-opacity'] = (props.id === focus) ? 1 : 1;
        map.setView([props['zlat'], props['zlng']], props['zzoom']);
        infoTop.innerHTML = '<div>' + props['header'] + '</div>';
        info.innerHTML = '<div>' + props['descript'] + '<br>' + '</div>';
        infoImg.innerHTML = '<div>' + props['image'] + '<br>' + '</div>';
      } else {
          props['stroke-opacity'] = (props.id !== focus) ? 0.0 : 1;
      }
  });
  features.setGeoJSON(geojson);
};

函数重置全部（焦点）{
功能。每个层（功能（l）{
var props=l.feature.properties；
道具['stroke-opacity']=1；
});
setGeoJSON（geojson）；
};
功能点击线（焦点）{
功能。每个层（功能（l）{
var props=l.feature.properties；
道具['stroke-opacity']=（props.id！==焦点）？0.5:1；
});
setGeoJSON（geojson）；
};
功能显示线（焦点）{
功能。每个层（功能（l）{
var props=l.feature.properties；
道具['stroke-opacity']=（props.id==焦点）？1:1；
});
setGeoJSON（geojson）；
};
函数更新头（焦点）{
//遍历中的每个功能，
//特性对象并更改属性。
功能。每个层（功能（l）{
var props=l.feature.properties；
如果（props.id==焦点）{
道具['stroke-opacity']=（props.id==焦点）？1:1；
map.setView（[props['zlat']，props['zlng']，props['zzoom']）；
infoTop.innerHTML=''+props['header']+''；
info.innerHTML=''+props['descript']+'
'+''；
infoImg.innerHTML=''+props['image']+'
'+''；
}否则{
道具['stroke-opacity']=（props.id！==焦点）？0.0:1；
}
});
setGeoJSON（geojson）；
};

-此处演示

希望这是有道理的。 谢谢

---

埃里克

类似的问题tohttp://stackoverflow.com/questions/2575420/jquery-binding-event-on-selected-class

---

为HTML对象使用一个唯一的类名，并使用jquery将事件绑定到您的函数中，以使用该类名的所有对象。

我必须对您的代码进行一些重构，使其能够工作并更加清晰。它并不完全符合您在请求中所描述的，但我认为您应该重新考虑您的期望，因为例如，当您不单击任何触发器时，只需将鼠标悬停在上方并向外悬停，您应该以与悬停前相同的状态结束，但在您的描述中，情况并非如此

其他备注：

首先，您不能对onmouseover和click事件使用相同的函数（除非您向它们传递不同的参数），因为您希望在这些事件上发生不同的事情

根据您的描述，似乎需要3个不透明度值才能使线条不可见、半可见和可见。我还分析了默认情况下所有的线都是不可见的

我也修复了你的重置按钮

updateheader（）

有点混乱，为了清晰起见，我把它注释掉了

总的来说，代码现在可以工作了，但还远远不够完美。您可能希望在清晰性和更高的抽象级别上工作，而不是重复代码的相同部分。祝你好运

这就是：

var-button=document.getElementById（'trigger'）；
var map=L.mapbox.map（'map'，'ejs06003.ilb3d7on'{
动物控制：错误
}).setView（[41.766431，-72.700585]，11）；
var geojson=[{
键入：“功能”，
几何图形：{
键入：“LineString”，
坐标：[
[-72.700585, 41.766431],
[-72.701112, 41.585276]
]
},
特性：{
“id”：0，
“笔划”：“白色”，
“笔划不透明度”：1，
“笔划宽度”：0，
“标题”：“重置标题”，
“描述”：“重置描述”，
“快速文本”：“快速重置”，
“映像”：“重置映像”，
“链接”：“重置链接”，
“zlat”：41.766431，
‘zlng’：-72.700585，
"zzoom":11
}
}, {
键入：“功能”，
几何图形：{
键入：“LineString”，
坐标：[
[-72.676081, 41.766431],
[-72.700585, 41.772385]
]
},
特性：{
“id”：1，
“笔划”：“e74c3c”，
“笔划不透明度”：0.5，
“笔划宽度”：4，
“标题”：“红色标题”，
“描述”：“红色描述”，
“快速文本”：“红色快速”，
“图像”：“+”文本“+”；
info.innerHTML=''+'文本'+'
'+''；
infoImg.innerHTML=''+'文本'+'
'+''；
//创建一个要素图层，用于保存上面的GeoJSON。
var features=L.mapbox.featureLayer（）.addTo（map）；
setGeoJSON（geojson）；
特性.on（'mouseover'，函数（e）{
焦点线（e.layer.feature.properties.id）；
});
reset.onclick=函数（）{
重置所有（0）；
//为了清楚起见，我把它注释掉了
//更新头（0）；
}
var selectedLine=null；
trigger.onclick=函数（）{
clickline（1，true）；
//为了清楚起见，我把它注释掉了
//更新头（1）；
}
trigger.onmouseover=函数（）{
点击线（1）；
}
trigger.onmouseout=函数（）{
展示线（1）；
}
trigger2.onclick=函数（）{
单击行（2，true）；
//为了清楚起见，我把它注释掉了
//更新负责人（2）；
}
trigger2.onmouseover=函数（）{
点击线（2）；
}
trigger2.onmouseout=函数（）{
展示线（2）；
}
trigger3.onclick=函数（）{
单击行（3，true）；
//为了清楚起见，我把它注释掉了
//更新负责人（3）；
}
trigger3.onmouseover=函数（）{
点击线（3）；
}
trigger3.onmouseout=函数（）{
展示线（3）；
}
var button = document.getElementById('trigger');
var map = L.mapbox.map('map', 'ejs06003.ilb3d7on', {
    zoomControl: false
}).setView([41.766431, -72.700585], 11);

var geojson = [{
    type: 'Feature',
    geometry: {
        type: 'LineString',
        coordinates: [
            [-72.700585, 41.766431],
            [-72.701112, 41.585276]
        ]
    },
    properties: {
        'id': 0,
            'stroke': 'white',
            'stroke-opacity': 1,
            'stroke-width': 0,
            'header': 'reset title',
            'descript': 'reset Description',
            'quicktext': 'reset quick',
            'image': 'reset image',
            'link': 'reset link',
            'zlat': 41.766431,
            'zlng': -72.700585,
            'zzoom': 11
    }
}, {
    type: 'Feature',
    geometry: {
        type: 'LineString',
        coordinates: [
            [-72.676081, 41.766431],
            [-72.700585, 41.772385]
        ]
    },
    properties: {
        'id': 1,
            'stroke': '#e74c3c',
            'stroke-opacity': 0.5,
            'stroke-width': 4,
            'header': 'red title',
            'descript': 'red Description',
            'quicktext': 'red quick',
            'image': '<img src="http://selectbylocation.com/i84/img/train.jpg"',
            'link': 'red link',
            'zlat': 41.772385,
            'zlng': -72.700585,
            'zzoom': 14
    }
}, {
    type: 'Feature',
    geometry: {
        type: 'LineString',
        coordinates: [
            [-72.653900, 41.763387],
            [-72.636562, 41.772385]
        ]
    },
    properties: {
        'id': 2,
            'stroke': '#3498db',
            'stroke-opacity': 0.5,
            'stroke-width': 4,
            'header': 'blue title',
            'descript': 'blue Description',
            'quicktext': 'blue quick',
            'image': '<img src="http://selectbylocation.com/i84/img/fasttrack.jpg"',
            'link': 'blue link',
            'zlat': 41.763387,
            'zlng': -72.653900,
            'zzoom': 14
    }
}, {
    type: 'Feature',
    geometry: {
        type: 'LineString',
        coordinates: [
            [-72.792525, 41.773561],
            [-72.692962, 41.809270],
            [-72.621894, 41.810165]
        ]
    },
    properties: {
        'id': 3,
            'stroke': 'green',
            'stroke-opacity': 0.5,
            'stroke-width': 4,
            'header': 'green title',
            'descript': 'green Description',
            'quicktext': 'green quick',
            'image': 'green image',
            'link': 'green link',
            'zlat': 41.809270,
            'zlng': -72.692962,
            'zzoom': 12
    }
}];

infoTop.innerHTML = '<div>' + 'text' + '</div>';
info.innerHTML = '<div>' + 'text' + '<br>' + '</div>';
infoImg.innerHTML = '<div>' + 'text' + '<br>' + '</div>';

// Create a feature layer that will hold the GeoJSON above.
var features = L.mapbox.featureLayer().addTo(map);
features.setGeoJSON(geojson);

features.on('mouseover', function (e) {
    focusline(e.layer.feature.properties.id);
});


reset.onclick = function () {
    resetall(0);
    // commented out just for clarity
    //updateheader(0);
}

var selectedLine = null;

trigger.onclick = function () {
    clickline(1, true);
    // commented out just for clarity
    //updateheader(1);
}
trigger.onmouseover = function () {
    clickline(1);
}
trigger.onmouseout = function () {
    showline(1);
}

trigger2.onclick = function () {
    clickline(2, true);
    // commented out just for clarity
    //updateheader(2);
}
trigger2.onmouseover = function () {
    clickline(2);
}
trigger2.onmouseout = function () {
    showline(2);
}

trigger3.onclick = function () {
    clickline(3, true);
    // commented out just for clarity
    //updateheader(3);
}
trigger3.onmouseover = function () {
    clickline(3);
}
trigger3.onmouseout = function () {
    showline(3);
}

function resetall(focus) {
    selectedLine = null;

    features.eachLayer(function (l) {
        var props = l.feature.properties;
        props['stroke-opacity'] = 0.5;
    });
    features.setGeoJSON(geojson);
};

function clickline(focus, actuallyClicked) {
    if (actuallyClicked) {
        selectedLine = focus;
    }
    // Iterate through each feature in the
    // features object and alter the properties.
    features.eachLayer(function (l) {
        var props = l.feature.properties;
        props['stroke-opacity'] = (props.id !== focus) ? 0 : 1;
    });

    // Rerun the geojson
    features.setGeoJSON(geojson);
};

function showline(focus) {
    if (selectedLine) {
        // Iterate through each feature in the
        // features object and alter the properties.
        features.eachLayer(function (l) {
            var props = l.feature.properties;
            props['stroke-opacity'] = (props.id === selectedLine) ? 1 : 0;

        });
    } else {
        features.eachLayer(function (l) {
            l.feature.properties['stroke-opacity'] = 0.5;
        });
    }


    // Rerun the geojson
    features.setGeoJSON(geojson);
};



function updateheader(focus) {
    // Iterate through each feature in the , 
    // features object and alter the properties.
    features.eachLayer(function (l) {
        var props = l.feature.properties;
        if (props.id === focus) {
            props['stroke-opacity'] = (props.id === focus) ? 1 : 1;
            map.setView([props['zlat'], props['zlng']], props['zzoom']);
            infoTop.innerHTML = '<div>' + props['header'] + '</div>';
            info.innerHTML = '<div>' + props['descript'] + '<br>' + '</div>';
            infoImg.innerHTML = '<div>' + props['image'] + '<br>' + '</div>';
        } else {
            props['stroke-opacity'] = (props.id !== focus) ? 0.0 : 1;
        }
    });
    // Rerun the geojson
    features.setGeoJSON(geojson);
};