Produkt-Selektion

by mtenschert

HTML

<link rel="stylesheet" href="https://www.alpinresorts.com/assets/css/main.css">



<ul class="list-unstyled">

  <li style="margin-top:50px;" ng-repeat="person in cart.persons" class="your-bookings__fold" ng-class="person.selected ? 'your-bookings__person-name--selected' : ''" ng-click="$event.stopPropagation(); person.removeItem(item, person); selectPerson($index, person); moveToPersonSettings()"
    ng-attr-class="{{ person.hasItems() &amp;&amp; 'your-bookings__unfold' || 'your-bookings__fold' }}" style="">
    <!-- ngIf: person.getAllItems().length > 0 -->
    <span ng-hide="cart.personCount <= 1" ng-click="removePerson(person)" class="remove-button">
        <i class="fa fa-trash-o"></i>
    </span>
    <img ng-src="/assets/images/adultmale.png" class="kopbigm" src="/assets/images/adultmale.png">
    <span class="your-bookings__person-name ng-binding">Manuel</span>
    <span class="person-price hidden-xs hidden-sm ng-binding" ng-bind="person.totalPrice">0,00&nbsp;€</span>
    <!-- ngIf: person.age && !person.isAdult -->
    <span></span>
    <div class="clearfix"></div>
    <ul class="clearfix product-items-list">
      <!-- ngRepeat: item in person.getAllItems() -->
    </ul>
    <span class="person-price hidden-md hidden-lg ng-binding" ng-bind="person.totalPrice">0,00&nbsp;€</span>
    <!-- ngIf: person.items.length > 0 && showCartCopy -->
    <p ng-hide="person.items.length > 0" class="select-product-info"> Produkt auswählen</p>


    < /li>


      <li ng-repeat="person in cart.persons" class="your-bookings__fold your-bookings__person-name--selected" ng-class="person.selected ? 'your-bookings__person-name--selected' : '' " ng-click="$event.stopPropagation(); person.removeItem(item, person); selectPerson($index, person); moveToPersonSettings()"
        ng-attr-class="{{ person.hasItems() &amp;&amp; 'your-bookings__unfold' || 'your-bookings__fold' }}">
        <!-- ngIf: person.getAllItems().length > 0 -->
        <span ng-hide="cart.personCount <= 1"...

CSS

.your-bookings__person-name--selected {
  border-top-color: green;
  border-right-color: green;
  border-bottom-color: green;
  border-left-color: green;
}

.person-menu__person--active {
  border-top-color: green;
  border-right-color: green;
  border-bottom-color: green;
  border-left-color: green;
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 2px;
}

li.your-bookings__person-name--selected {
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 2px;
}

.active-info {
  background: rgb(27, 152, 32);
  position: absolute;
  top: -11px;
  text-align: center;
  left: 106px;
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
  border-bottom-right-radius: 9px;
  border-bottom-left-radius: 9px;
}

.active-info small {
  color: white;
  font-weight: bold;
  padding: 10px;
  line-height: 170%;
}

JavaScript

var activeDiv = "<div class='active-info'><small>active!</small></div>";
var personSelected = $(".your-bookings__person-name--selected");

 $("ul.list-unstyled li").each(function() {
   $(personSelected).append(activeDiv);
});

//  alert( activeDiv );