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

Question

I have a number of buttons on a webpage that interact with a amp. I want each to do one of three JavaScript functions based on the mouse event.

The problem I am having is that when I click on a button the other lines disappear but when I mouseout all lines show again. What I need is:

onmouseover = While hovering, hide non-corresponding elements, focus to stay visible. (Using opacity = 0 for various reasons.)

onclick = Permanently hide non-corresponding elements until another button is clicked.

onmouseout = Show all elements if it wasn't clicked but if it was clicked only show focused element until another button is clicked.

You can see the functions here. They all work, just not sure how to get what I need to work.

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);
};

JSfiddle - Demo here

Hopefully this makes sense. Thanks.

Eric

Answer 1

Similar question tohttp://stackoverflow.com/questions/2575420/jquery-binding-event-on-selected-class

Use a unique class name for the HTML objects to have and bind the event to your functions using jquery to all objects with that class name.

Answer 2

I had to refactor your code a bit to make it work and be more clear. It does not do exactly what you described in your request, but I'd say you should rethink your expectations, because eg when you don't click any trigger, just hover over and out, you should end up with the same state as before hovering, but in your description it doesn't look like that.

Other remarks:

1. First of all you cannot use the same function for onmouseover and click event (unless you pass different parameters to them), because you want different things to happen on those events.
2. From your description it seems like you would need 3 values of opacity to make lines invisible, semi-visible and visible. I also asumed that by default all the lines are invisible.
3. I fixed your reset button, too.
4. updateheader() messes up a bit, so I commented it out for clarity.

Overall, the code works now, but is far from perfect. You may want to work on clarity and higher level of abstraction instead of repeating same parts of code. Good luck.

So here it is http://jsfiddle.net/A7edV/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);
};