Скрыть нажатый / проведенный элемент (щелкните правой кнопкой мыши / проведите пальцем вправо)

Question

Скрыть нажатый / проведенный элемент (щелкните правой кнопкой мыши / проведите пальцем вправо)

0

Привет, у меня есть код:

body {
  font-family: Roboto;
  box-sizing: border-box
}
.cContent {
  display: flex;
  flex-direction: column;
}
.cHeaders {
  display: flex;
  flex-direction: row;
}
.cHeader {
  background-color: rgb(141, 141, 142);
  color: white;
  padding: 10px;
  margin-left: 10px;
  margin-bottom: 5px;
}
.cThemeHeader {
  width: 300px;
}
.cItemHeader {
  width: 300px;
}
.cCountHeader {
  width: 80px;
  text-align: center
}
.cData {
  display: flex;
}
.cRow {
  display: flex;
  flex-direction: column;
}
.cItemRow {
  display: flex;
  width: 300px;
}
.cBox {
  background-color: rgb(208, 229, 199);
  color: #4a7f35;
  padding: 10px;
  margin-left: 10px;
  margin-bottom: 5px;
}
.cTheme {
  width: 300px;
}
.cItem {
  background-color: white;
  color: #4a7f35;
  border: 1px solid #4a7f35;
  padding-left: 5px;
  padding-right: 5px;
  margin-right: 10px;
  cursor: pointer;
  font-size: 12px;
  height: 18px;
}
.cCount {
  width: 80px;
  background-color: #4a7f35;
  color: white;
  text-align: center
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
  body {
    font-family: Arial;
  }
  .cBox {
    height: 50px;
    font-size: 20px;
    line-height: 50px;
  }
  .cItem {
    height: 50px;
    font-size: 20px;
    line-height: 50px;
  }
}

<!doctype html>
<html ng-app="myApp" ng-controller="myController">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>Arbeitsplanung</title>
  <link rel="stylesheet" href="/styles.css">
  <script src="/angular.min.js"></script>
  <script src="/angular-touch.js"></script>
  <script src="/jquery.min.js"></script>
  <script>
    angular.module("myApp", ['ngTouch']).controller("myController", function($scope) {
      $scope.dataList = [{
        id: 1,
        count: 0,
        text: 'Leistung nach Bedarf',
        items: [{
          id: 1,
          text: 'bei Bedarf'
        }]
      }, {
        id: 2,
        count: 0,
        text: 'Leistung je 2 stündlich',
        items: [{
          id: 1,
          text: '11:00'
        }, {
          id: 2,
          text: '15:00'
        }]
      }, {
        id: 3,
        count: 0,
        text: 'Leistung auf einen fixen Zeitpunkt',
        items: [{
          id: 1,
          text: '15:00'
        }, {
          id: 2,
          text: '16:00'
        }]
      }];
      $scope.hideBox = function(event) {
        $(event.target).hide();
      }
    });
  </script>
  <script src="/removeItem.js"></script>
</head>

<body>
  <div class="cContent">
    <div class="cHeaders">
      <div class="cHeader cThemeHeader">Katalog</div>
      <div class="cHeader cItemHeader">Plan</div>
      <div class="cHeader cCountHeader">Ist</div>
    </div>

    <div class="cData" ng-repeat="data in dataList">
      <div class="cThemeRow">
        <div class="cBox cTheme">{{data.text}}</div>
      </div>

      <div class="cBox cItemRow">
        <div ng-repeat="item in data.items" class="cItem" ng-click="data.count = data.count + 1; hideBox($event);" ng-swipe-right="data.count = data.count + 1; hideBox($event);">{{item.text}}</div>
      </div>

      <div class="cCountRow">
        <div class="cBox cCount">{{data.count}}</div>
      </div>
    </div>
  </div>
</body>

</html>

Когда я нажимаю на белый квадрат (или прокручиваю его на планшете), я хотел бы скрыть элемент с щелчком/сместим. Я попробовал это с помощью $ event.target, но, похоже, он вообще не работает. У кого-то есть идея, как скрыть текущий элемент clicked/swipped (ng-click, ng-swipe-right)? Благодарю.

РЕШЕНИЕ: Он работает, моя ошибка:

<div ng-repeat="item in data.items" class="cItem" ng-click="data.count = data.count + 1; hideBox(this);" ng-swipe-right="data.count = data.count + 1; hideBox($event);">{{item.text}}</div>

Я использовал this в ng-click в случае $event.

MrBuggy 21 июль 2016, в 09:08

Источник

0

СМОТРИТЕ НА РЕДАКТИРОВАТЬ, Я НАШЕЛ ОШИБКУ. БЛАГОДАРЮ.
webta.st.ic 21 июль 2016, в 06:41

Теги:

jquery

html

angularjs

1 ответ

Ещё вопросы

СМОТРИТЕ НА РЕДАКТИРОВАТЬ, Я НАШЕЛ ОШИБКУ. БЛАГОДАРЮ.

MrBuggy · Accepted Answer · 2016-07-21T05-42-00.000Z

РЕШЕНИЕ: Он работает, моя ошибка:

<div ng-repeat="item in data.items" class="cItem" ng-click="data.count = data.count + 1; hideBox(this);" ng-swipe-right="data.count = data.count + 1; hideBox($event);">{{item.text}}</div>

Я использовал this в ng-click в случае $event (посмотрите на редактирование в моем вопросе). Он отлично работает с $(event.target).hide(); , В любом случае, спасибо.