Question

使用JS或Jquery（首选JS）如何在单击另一个元素（由各自的类标识的两个元素）之后更改元素的显示样式。以下似乎不起作用。

<?php /* Static Name: Map */ ?>
<style type="text/css">
    /* Set a size for our map container, the Google Map will take up 100% of this container */
    #map {
        width: 100%;
        height: 391px;
    }
</style>
<script type="text/javascript">
    // When the window has finished loading create our google map below
    google.maps.event.addDomListener(window, 'load', init);

    function init() {

        // The latitude and longitude to center the map (always required)
        var myLatlng = new google.maps.LatLng(<?php echo of_get_option('latitude'); ?>, <?php echo of_get_option('longitude'); ?>);

        // Basic options for a simple Google Map
        // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
        var mapOptions = {
            // How zoomed in you want the map to start at (always required)
            zoom: <?php echo of_get_option('zoom'); ?>,

            scrollwheel: false,

            // The latitude and longitude to center the map (always required)
            center: myLatlng, // Santa Barbara

            // How you would like to style the map. 
            // This is where you would paste any style found on Snazzy Maps.
            styles: 
            [
    {
        "featureType": "water",
        "elementType": "all",
        "stylers": [
            {
                "hue": "#76aee3"
            },
            {
                "saturation": 38
            },
            {
                "lightness": -11
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "all",
        "stylers": [
            {
                "hue": "#8dc749"
            },
            {
                "saturation": -47
            },
            {
                "lightness": -17
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "poi.park",
        "elementType": "all",
        "stylers": [
            {
                "hue": "#c6e3a4"
            },
            {
                "saturation": 17
            },
            {
                "lightness": -2
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "all",
        "stylers": [
            {
                "hue": "#cccccc"
            },
            {
                "saturation": -100
            },
            {
                "lightness": 13
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "administrative.land_parcel",
        "elementType": "all",
        "stylers": [
            {
                "hue": "#5f5855"
            },
            {
                "saturation": 6
            },
            {
                "lightness": -31
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "all",
        "stylers": [
            {
                "hue": "#ffffff"
            },
            {
                "saturation": -100
            },
            {
                "lightness": 100
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "all",
        "stylers": []
    }
]
        };

        // Create the Google Map using out element and options defined above
        var map = new google.maps.Map(document.getElementById('map'), mapOptions);

        var contentString = '<div id="content"><?php $desc = of_get_option("description"); echo str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $desc); ?></div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var image = '<?php echo get_stylesheet_directory_uri(); ?>/images/marker.png';

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            icon: image
        });

        // To add the marker to the map, call setMap();
        marker.setMap(map);

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
        });

    }
</script>
<div id="map"></div>

控制台甚至不记录任何内容

Answer 1

看起来您正试图在jQuery选择器中使用CLASS语法来引用您的ID。

而不是使用$(".xyz")使用$("#xyz")。您的$(".abc")选择器也是如此。

希望有所帮助！

Answer 2

您应该使用document.querySelector(cssSelector)按类或ID获取元素，或document.getElementById仅按ID获取元素。这是VanilaJS解决方案：

var firstElem = document.querySelector(".class1");

firstElem.addEventListener("click", function(event){
  var secondElem = document.querySelector(".class2");
  secondElem.style.display = "none";
})

<i id="xyz" class="class1" >hey</i>

<div id="abc" class="class2">lo</div>

通过单击带有类y（JS）的元素来更改具有类x的元素的显示

2 个答案: