Question

我尝试做的是突出显示已选中时以不同颜色单击的框的边框。我尝试使用selectFlight方法中的document.getElementById在typescript文件中使用类（在flight-viewer.html中使用（单击）显示在此处显示：

flight.viewer.component.ts：

@Component({
    selector: 'flight-viewer',
    templateUrl: 'app/flight-viewer.html',
    styleUrls: ['app/flight-viewer.css']
})
export class FlightViewerComponent  {
    name = 'FlightViewerComponent';
    errorMessage = "";
    stateValid = true;
    flights: Flight[];
    selectedFlight: Flight;
    flightToUpdate: Flight;
    flightClicked = false;
    @Output()
    onFlightUpdating = new EventEmitter<Flight>();

    constructor(private service: FlightService) {
        this.selectedFlight = null;
        this.flightToUpdate = null;
        this.fetchFlights();
    }

    flightSelected(selected: Flight) {
        console.log("Setting selected flight to: ", selected.number);
        this.selectedFlight = selected;
    }
    flightUpdating(selected: Flight) {
        console.log("Setting updateable flight to: ", selected.number);
        this.flightToUpdate = selected;
    }

    updateFlight() {
        console.log("Just selected ", this.selectedFlight.number, " for update");
        this.onFlightUpdating.emit(this.selectedFlight);
    }

    selectFlight(selected: Flight) {
    console.log("Just click on this flight ", selected.number, " for display");
   this.flightClicked = true;
   this.selectedFlight = selected;
    // add 'active' class
    alert(document.getElementById("getFlight"));
    document.getElementById("getFlight").className = "active";
}

    private fetchFlights() {
        this.selectedFlight = null;
        this.flightToUpdate = null;
        this.service
            .fetchFlights()
            .subscribe(flights => this.flights = flights,
                       () => this.raiseError("No flights found!"));
    }
}

飞行-viewer.html

<h3>Flights </h3>
<div >
    <ul class= "grid grid-pad">
        <a *ngFor="let flight of flights" class="col-1-4">
        <li class ="module flight" (click)="selectFlight(flight)" id="getFlight">
                <h4 tabindex ="0">{{flight.number}}</h4>
            </li>
        </a>
    </ul>
</div>


<div class="box" *ngIf="flightClicked">
    <!--<flight-selected [flight]="selectedFlight"></flight-selected>-->
          You have selected flight: {{selectedFlight.number}}<br>
          From: {{selectedFlight.origin}}<br>
          Leaving at: {{selectedFlight.departure || date }}<br>
          Going to: {{selectedFlight.destination}}<br>
          Arriving at: {{selectedFlight.arrival || date}}<br><br>
    <h3><span (click)="updateFlight(flight)">Update</span></h3>

</div>

<div *ngIf="flightToUpdate">
    <flight-update [flight]="flightToUpdate"
                   (onFlightUpdated)="updateFlight($event)"></flight-update>
</div>

飞行viewer.css：

   h3 {
    text-align: center;
    margin-bottom: 0;
}

h4:focus {
    position: relative;
    max-height: 120px;
    min-width: 170px;
    background-color:limegreen;
}

ul {
    width: 1600px;
    overflow-x: scroll;
    background: #ccc;
    white-space: nowrap;
    vertical-align: middle;

}
div
{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

li {
    display: inline-block;
    /* if you need ie7 support */
    *display: inline;
    zoom: 1
}

.module {
    padding: 20px;
    text-align: center;
    color: #eee;
    max-height: 120px;
    min-width: 120px;
    background-color: #607D8B;
    border-radius: 2px;
}

.active {
    padding: 20px;
    text-align: center;
    color: #eee;
    max-height: 120px;
    min-width: 120px;
    background-color: #607D8B;
    border-radius: 2px;
    border: 5px solid #73AD21

}

.normal {
    padding: 20px;
    text-align: center;
    color: #eee;
    max-height: 120px;
    min-width: 120px;
    background-color: #607D8B;
    border-radius: 2px;
}
.module:hover {
    background-color: #EEE;
    cursor: pointer;
    color: #607d8b;
}

.box {
    text-align: center;
    margin-bottom: 0;
    margin: auto;
    width: 600px;
    position:absolute;
    top: 180px;
    right: 0;
    height: 100px;
    border: 5px solid #73AD21;
    text-align: center;
    display: inline-block;
}

基本上，我希望.module在单击时具有不同的边框颜色。我尝试使用组件类中引用的.active和.normal类来实现它，但这不起作用。

我的应用程序是什么样的：

基本上，我希望以灰色突出显示的整个框具有不同的边框颜色，而不是只是框内的一个小矩形，以具有不同的边框颜色。（我使用制表符索引实现了这一点，但这还不够）

我将不胜感激任何帮助。欢呼声。

编辑：它现在突出显示框，但当我关闭警报框时，它会消失。如何使绿色轮廓保持不变直到我点击另一个框？干杯

Answer 1

你写得像：

document.getElementById("module").className = "active";

HTML中没有提供id = ＆＃34;模块＆＃34;

的元素

//替换它：

 <li class ="module flight" (click)="selectFlight(flight)">
                <h4 tabindex ="0">{{flight.number}}</h4>
            </li>

使用

<li class ="module flight" (click)="selectFlight(flight)" id="getFlight">
                <h4 tabindex ="0">{{flight.number}}</h4>    </li>

然后尝试：

 document.getElementById("getFlight").className = "active";

Answer 2

您尝试“添加”新课程的方式只是将.module元素的所有类替换为active

我想你想做点什么

// add 'active' class
document.getElementById("module").className = document.getElementById("module").className + " active";

// remove 'active' class
document.getElementById("module").className = document.getElementById("module").className.replace('active','');

单击时更改标题的CSS属性

2 个答案: